第二个示例:嵌套路由
此示例显示了嵌套路由的工作方式。路线/topics会加载Topics组件,在这个组件上的path:id值上有条件地渲染任何其他<Route>。
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
function About(props) {
console.log('About=>', props);
return <h2>About</h2>;
}
function Topic() {
let { topicId } = useParams();
return <h3>Requested topic ID: {topicId}</h3>
}
function Topics() {
const match = useRouteMatch();
console.log('match=>', match);
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
{/*
Topics页面有自己的<Switch>,其中包含更多的路线,建立在/topics路径之上
您可以将第二个<Route>视为所有主题的“索引”页面,或者当未选择任何主题时显示的页面
*/}
<Switch>
<Route path={`${match.path}/:topicId`}>
<Topic />
</Route>
<Route path={match.path}>
<h3>Please select a topic.</h3>
</Route>
</Switch>
</div>
);
}
function App() {
return <BrowserRouter>
<ul>
<li>
<Link to={'/'}>Home</Link>
</li>
<li>
<Link to={'/about'}>About</Link>
</li>
<li>
<Link to={'/topics'}>Topics</Link>
</li>
</ul>
<Switch>
<Route path={'/about'}>
<About />
</Route>
<Route path={'/topics'}>
<Topics />
</Route>
<Route path={'/'}>
<Home />
</Route>
</Switch>
</BrowserRouter>
}
ReactDOM.render(<App />, document.querySelector('#root'));