[React Router v4] Render Multiple Components for the Same Route

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating dynamic routes on our applications.

import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';const Links = () =>
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>const Header = ({match}) => (
<div className="header">
<Route path="/:page"
render={({match}) => (
<h1>{match.params.page} header</h1>)} />
</div>
)const Content = ({match}) => (
<div className="content">
<Route path="/:page"
render={({match}) => (
<p>{match.params.page} content</p>)} />
</div>
)const App = (props) => (
<Router basename={props.path}>
<div>
<Links />
<Header />
<Content />
</div>
</Router>
)export default App