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属性的使用。渲染器正在执行该功能以显示用户。