How to move between nested components with React Router

Question

I have been working along just fine with react router until I had to try and nest components and get my nav bar to show the path. For example I want to go from my matches page to a portfolio page, then I want the url to reflect this(....../#/matches/portfolio).

To me the docs seem to explain how to do this however I can only get the url to change and not the page content. No error is show just noting happens to the view.

Here is my router containing nested routes:

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
      <Route path="home" component={Home} />
      <Route path="matches" component={Matches}>
        <Route path="portfolio" component={Portfolio}>
          <Route path="search" component={Search} />
        </Route>
      </Route>
      <Route path="create" component={Create} />
      <Route path="join" component={Join}/>
    </Route>
  </Router>
, document.getElementById('app'));

And if I am on the matches page and want to link to a portfolio I have a button with:

<Link to="matches/portfolio">To Portfolio</Link>

(Ideally I would like to have it have a portfolioId attached to the url but I am trying to keep it simple at the moment)

The repo can be found here: https://github.com/muddybarefeet/pirateStocks and then main router is in server/client/src/app.jsx and all components in server/client/src/components. To see the project run nodemon server.js and webpack

Answer 1

The following is how I got my routes to work. This is not what the docs say but it works!

ReactDOM.render(
  <Router history={hashHistory}>
   <Route path="/" component={App}>
     <Route path="/login" component={Login} />
     <Route path="/home" component={Home} />
     <Route path="/join" component={Join}/>
     <Route path="/matches" component={Matches} />
     <Route path="/matches/portfolio" component={Portfolio} />
     <Route path="/matches/portfolio/search" component={Search} />
    <Route path="create" component={Create} />
  </Route>
</Router>
, document.getElementById('app'));

And then route with the following:

<Link to="/matches/portfolio">To Portfolio</Link>