Mamdoh Saraireh Mamdoh Saraireh - 1 month ago 9
Javascript Question

Going to the router URL directly is not working

I'm using react-router, and everything is working fine except when I go to the URL directly. For example, if I clicked on a Link in the app that goes to "/quizreview?quizId=nAUl3DmFlX" it works with no problem. But if I entered the URL "http://localhost:3000/quizreview?quizId=nAUl3DmFlX" it says:

Cannot GET /quizreview?quizId=nAUl3DmFlX

Here is my router code:

ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={UserQuiz} onEnter={loginRequired}/>
<Route path="/login" component={Login}/>
<Route path="/quiz/:id" component={Quiz}/>
<Route path="/quizreview" component={PostQuiz}/>
<Route path="/quizquestions/:quizId" component={QuestionForm}/>
<Route path="/questionreview/:questionId" component={QuestionReview}/>
<Route path="/noquestions" component={NoQuestionsDialog}/>
</Route>
</Router>
), document.getElementById('app'));


Am I doing anything wrong here? I followed the React-Router tutorial and it's working fine and I believe I followed the same instructions but with this problem occuring.

Answer

If you are using the HTML5, then to visit the URL directly with browserHistory you need to have historyApiFallback: true in your webpack file if you are using webpack or else you can try and alternative i.e to use history={hashHistory} with react-router and then visit your url like

http://localhost:3000/#/quizreview?quizId=nAUl3DmFlX