Daha Fazla Nesting

İlk olarak, Repos route’u içerisinde Repo route’unu yerleştirin. Sonra Repostaki this.props.childrenı render edin.

// index.js
// ...
<Route path="/repos" component={Repos}>
  <Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>

// Repos.js
// ...
<div>
  <h2>Repos</h2>
  <ul>
    <li><Link to="/repos/reactjs/react-router">React Router</Link></li>
    <li><Link to="/repos/facebook/react">React</Link></li>
  </ul>
  {/* Linkimiz /repos/:userName/:repoName olduğunda `Repo.js` render edilecek. */}
  {this.props.children}
</div>

Aktif Linkler

Daha önce oluşturduğumuz NavLinkimizi kullanalım, böylece active sınıf adını bu bağlantılara eklemiş olacağız:

// modules/Repos.js
// import it
import NavLink from './NavLink'

// ...
<li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
<li><NavLink to="/repos/facebook/react">React</NavLink></li>
// ...

Sıradaki Eğitim: Index Route