Going to the router URL directly is not working

Question

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 1

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

what historyApiFallback does, is make it so your server returns index.html for whatever URL you try to access and since your routes are then configured with respect to index.html so you can access any of the route url directly

or else you can try and alternative ie to use history={hashHistory} with react-router and then visit your url like

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