React.js中的嵌套路由

我们有一个app.jsx组件

import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import Category from './Category';
class App extends Component {
   render() {
      return (
         <div>
            <nav className="navbar navbar-light">
               <ul className="nav navbar-nav">
                  <li><Link to="/">Main Page</Link></li>
                  <li><Link to="/users">Users</Link></li>
               </ul>
            </nav>
            <Switch>
               <Route exact path="/" component={MainPage}/>
               <Route path="/users" component={Users}/>
            </Switch>
         </div>
      );
   }
}
export default App;

这里有两个组件MainPage和Users。MainPage是我们的主要组件，使用确切的关键字和路径作为'/'进行映射

用户组件是我们进行嵌套路由的地方。实际的嵌套将在Users组件内实现。在app.jsx文件中，我们仅具有指向Users组件的父链接。

嵌套在用户组件中

import React from 'react';
import { Link, Route } from 'react-router-dom';
const Users = ({ match }) => {
   return(
      <div>
         <ul>
            <li><Link to={`${match.url}/David`}>David</Link></li>
            <li><Link to={`${match.url}/Steve`}>Steve</Link></li>
            <li><Link to={`${match.url}/John`}>John</Link></li>
         </ul>
         <Route path={`${match.path}/:name`} render= {({match}) =>( <div><h3> {match.params.name} </h3></div>)}/>
      </div>
   )
}
export default Users;

match对象包含路径/ users，而：name属性包含特定用户的嵌套。我们还在用户中创建了链接组件，以导航到特定用户。

注意“用户”组件中“路径”路径上的render属性的使用。渲染器正在执行该功能以显示用户。