Create-react-app: React Router Not Working

[tamaccount]

I am having trouble using React Router to create another static page within my app.

Here is what my render method looks like:

ReactDOM.render(
 <Router history={hashHistory}>
  <Route path="/" component={Home}>
     <Route path="material" component={Material}/>
   </Route>
 </Router>,
 document.getElementById('root')
);

When I try to visit localhost:8080/material, the url redirects to localhost:8080/material#/ and I the page just loads Home instead of Material. There is no way for me to access my Material Component.

The same error occurs when I reconfigure the render method to look like this:

ReactDOM.render(
 <Router history={hashHistory}>
  <Route path="/" component={Home}/>
  <Route path="/material" component={Material}/>
 </Router>,
 document.getElementById('root')
);

What do I have to do to get access to different routes?
edit: forgot question mark

[danieldram]

Which version of react-router are you using?

[tamaccount]

My package.json says 3.0.2

[viankakrisna]

You need to go to localhost:8080/#/material to access your material component because you are using hashHistory.

[tamaccount]

Thank you for the help.

Is there a way to eliminate having to use the hashHistory or history altogether?

I believe when I was not feeding the history prop, no pages would load and I received an error in the console saying "Cannot read property 'getCurrentLocation' of undefined".

[gaearon]

If you want to use the browser history, you should pass the browserHistory instead.

import { browserHistory } from 'react-router';

ReactDOM.render(
 <Router history={browserHistory}>

I hope this helps!

[tamaccount]

Thank you everyone for the help!

[danieldram]

Be careful if you decide to upgrade to 4.0. I was having similar issue as you but with hashHistory and BrowserHistory being undefined, it is because 4.0 injects the history into the props you pass down to your routes. Lock down your ver if you don't want things to break on a deploy to prod :)

[alisonzthu]

@danieldram may I ask what do you mean by "lock down your ver" plz?

[Timer]

@alisonzthu he's probably referring to not using * in your package.json, if it reads something like ^3.0.0 you're fine (you should never use *).

To truly lock down your versions, you must use Yarn.

[alisonzthu]

@Timer, I see. Thanks for the explanation!

[bibekg]

I've found that using browserHistory prevents me from navigating directly to custom routes (going straight to example.com/mypath in-browser doesn't work). Is there an easy way around this shortcoming of browserHistory?

[Timer]

That is a question better asked in the react router community. That said, make sure your production configuration serves index.html for all routes not explicitly matched.