Steve Lindemann decb140c93 rackt->reactjs 8 年之前
..
modules decb140c93 rackt->reactjs 8 年之前
README.md decb140c93 rackt->reactjs 8 年之前
index.css 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 年之前
index.html 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 年之前
index.js 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 年之前
package.json 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 年之前
webpack.config.js 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 年之前

README.md

More Nesting

Notice how the list of links to different repositories goes away when we navigate to a repository? What if we want the list to persist, just like the global navigation persists?

Try to figure that out before reading on.

...

First, nest the Repo route under the Repos route. Then go render this.props.children in Repos.

// 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>
  {/* will render `Repo.js` when at /repos/:userName/:repoName */}
  {this.props.children}
</div>

Active Links

Let's bring in our NavLink from before so we can add the active class name to these links:

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

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

Notice how both the /repos link up top and the individual repo links are both active? When child routes are active, so are the parents.


Next: Index Routes