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

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