React Router Not Working

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

[tamaccount]

Thank you everyone for the help!

[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!