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

[tianhao-au]

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?
```

[vojtatranta]

I am not sure whether it works with hash urls.
Have you tried not to use hashes? e.g. http://localhost:3001/assets/about?_k=3mr0ay

[tianhao-au]

Sorry, I am not explain it clearly.

The reason I want to use createBrowserHistory is I want to get the crap _k=3mr0ay and hash tag.

Before I add createBrowserHistory, I use url like assets#/about?_k=3mr0ay and it works fine. But after I use it I can get assets/about working. Because of the error above.

So I am not sure how to get it working properly.

[knowbody]

I'm not sure if it was you asking the same/similar question on SO and I gave the explanation together with the example how it should be done.

[tianhao-au]

Yes, same question. Actually I already got the stuff you gave to me working and it's no problem. Please see my question carefully.

My problem here is the root url is not '/' and it's '/others/'. Before I used createBrowserHistory, I can just put path='/', but after I added it, the path '/' is not working.

Error Warning: Location "/assets" did not match any routes

[knowbody]

lol answering in the two places sorry.

as per my SO comment, just a copy here:

the reason is not working for you is because you are adding extra / in the end of your path. then the URL you enter should be ending with this extra slash: http://localhost:3001/assets/. If you don't want it then your path should look like: /assets instead of assets/

[tianhao-au]

Unfortunately, I tried both <Route path="assets/" component={App}> and <Route path="/assets" component={App}> and even <Route path="/assets/" component={App}>

All of above not working. Any idea what it should be like? Thanks.

[knowbody]

It's hard to tell with the amount of information you gave. I provided you with the working example. Either try the example and see what is different in your app or provide more code or even better minima failing example I can play with.

[tianhao-au]

Thanks. Probably I will try something different tomorrow and see how it is going.

Hopefully below code in the example can help me a little bit.

const history = useBasename(createHistory)({ basename: '/animations' })

[knowbody]

feel free to ask more questions here or if you think that the issue can be closed please do so :)

[tianhao-au]

Yeah, I will close if it works.

[bellicose100xp]

I've tried the

    const history = useBasename(createHistory)({ basename: '/animations' })

as wells as,

    import createBrowserHistory from 'history/lib/createBrowserHistory';
    let history = createBrowserHistory();

once I add any of these, all routes stop working except the '/' route.

[knowbody]

please show more code and I'll be able to help

[bellicose100xp]

    'use strict';
    import React from 'react';
    import {Router, Route} from 'react-router';
    import createBrowserHistory from 'history/lib/createBrowserHistory';

    import App from './app';
    import Homepage from './components/homepage';
    import Customers from './components/customers';
    import Test from './components/test';

    let history = createBrowserHistory();

    React.render((
        <Router history={history}>
            <Route component={App}>
                <Route path="/" component={Homepage}/>
                <Route path="test" component={Test}/>
            </Route>
        </Router>
    ),
    document.querySelector('#app'));

[knowbody]

try this instead (remember to import IndexRoute):

<Router history={history}>
  <Route path="/" component={App}>
    <IndexRoute component={Homepage} />
    <Route path="test" component={Test} />
  </Route>
</Router>

[bellicose100xp]

Once I add this, any <Link> elements and this.context.history inside the component works as expected, but If type, localhost/test or localhost/#/test in the address bar directly, it doesn't work

[knowbody]

this is weird... what errors are you getting then?

[Enet4]

Just joining your conversation to let you know that I might be facing the same (or a quite similar) problem. When using a browser history, navigating to one of my routes results in a simple page showing "Not Found". I have no idea where this comes from, it really doesn't seem to come from my project. Clicking on Link elements works fine too.

[knowbody]

could you reproduce it so I can have a look into it. I have no idea how to reproduce the issue

[bellicose100xp]

I'm not getting any errors, Here's my test sample https://github.com/bellicose100xp/react-input just run gulp after npm install

[knowbody]

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({})];
        }
    });
});

[bellicose100xp]

that did it, it works now, would not have guessed this solution. Thank you

[shivanir12]

let routes = ( <Router> <Route path="/" component={StorePicker}> <Route path="/store/:storeName" component={App}> <Route path="*" component={NotFound}> </Router> ) I am using webpack dev server. When i go to localhost:3000/store/storename i get 404 not found