react-router: After adding createBrowserHistory, the app is not working as expected

I used the version 1-rc for react router. My route config is something like below:

   return (
      <Router>
        <Route path="/" component={App}>
          <IndexRoute component={About} />
          <Route path="about" component={About} />
          <Route path="user" component={User} />
        </Route>
      </Router>
    );

And the access url is like below: http://localhost:3001/assets# (entry point) http://localhost:3001/assets#/about?_k=3mr0ay

However, when I added the createBrowserHistory support to the Route:

history={createBrowserHistory()}

The app is not working correctly.

The error is: Warning: Location “/assets” did not match any routes

Even I add the /assets to the path it is still not working.

What’s the correct way of doing this?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 22 (9 by maintainers)

Most upvoted comments

okay, so the problem was that you were using gulp-connect to create your dev server. which does not support browser history. so to make it work you need to npm install connect-history-api-fallback and then require it on top of your gulpfile file:

var historyApiFallback = require('connect-history-api-fallback');

and your connect task should look like:

gulp.task('connect', function () {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true,
        middleware: function(connect, opt){
            return [historyApiFallback({})];
        }
    });
});

knowbody on Sep 29, 2015