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