[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