数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理
社会学
时尚学
法律学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 是我们的主组件，使用 exact 关键词和路径“/”进行映射
Users 组件是我们执行嵌套路由的地方。实际的嵌套将在 Users 组件内部实现。在 app.jsx 文件中，我们只会拥有指向 Users 组件的父链接。
在 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 属性包含针对特定用户的嵌套。我们还在 Users 中创建了 Link 组件，用于导航到特定用户。
请注意，使用了 Users 组件中 Route 路径上的 render 属性。Render 正在执行函数以显示用户。
更新于: 2019 年 9 月 4 日
384 次观看
广告