使用 React Router v4 渲染侧边栏或面包屑导航
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
在使用 React Router 构建应用时，您经常需要实现侧边栏或面包屑导航栏。本文将通过分析 React Router 文档中的侧边栏示例，讲解如何使用 React Router 实现这些功能。
在应用中使用侧边栏或面包屑导航栏是一种常见的 UI 模式。由于 React Router 允许你Route在每个页面上渲染和匹配多个导航栏，因此实现这种模式非常简单。本文旨在展示如何通过渲染多个Route导航栏，根据路径在页面的不同位置渲染不同的组件（例如侧边栏）。
首先，也是本文的关键所在，我们要创建一个路由数组。数组中的每个元素都将包含有关特定路由的所有信息，以及应该渲染哪个组件。
const routes = [
{ path: '/',
exact: true,
sidebar: () => <div>home!</div>,
main: () => <h2>Home</h2>
},
{ path: '/bubblegum',
sidebar: () => <div>bubblegum!</div>,
main: () => <h2>Bubblegum</h2>
},
{ path: '/shoelaces',
sidebar: () => <div>shoelaces!</div>,
main: () => <h2>Shoelaces</h2>
}
]
现在，由于我们将路由抽象到了这个数组中，每当我们想要渲染任何Route组件时，我们都可以遍历它并指定要渲染哪个组件（main或sidebar）。为了展示如何实现这一点，我们首先来构建应用程序的基本框架。
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link,
} from 'react-router-dom'
const routes = [
{ path: '/',
exact: true,
sidebar: () => <div>home!</div>,
main: () => <h2>Home</h2>
},
{ path: '/bubblegum',
sidebar: () => <div>bubblegum!</div>,
main: () => <h2>Bubblegum</h2>
},
{ path: '/shoelaces',
sidebar: () => <div>shoelaces!</div>,
main: () => <h2>Shoelaces</h2>
}
]
class App extends React.Component {
render() {
return (
<Router>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '40%',
background: '#f0f0f0'
}}>
<ul style={{ listStyleType: 'none', padding: 0 }}>
<li><Link to="/">Home</Link></li>
<li><Link to="/bubblegum">Bubblegum</Link></li>
<li><Link to="/shoelaces">Shoelaces</Link></li>
</ul>
</div>
</div>
</Router>
)
}
}
export default App
记住，我们的目标是根据路径在应用程序的不同位置渲染多个组件。我们已经有了routes数组，所以无论我们想在哪里渲染组件，Route都可以直接遍历它。首先，让我们Route在侧边栏（导航栏内）添加一些组件。
render() {
return (
<Router>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '40%',
background: '#f0f0f0'
}}>
<ul style={{ listStyleType: 'none', padding: 0 }}>
<li><Link to="/">Home</Link></li>
<li><Link to="/bubblegum">Bubblegum</Link></li>
<li><Link to="/shoelaces">Shoelaces</Link></li>
</ul>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.sidebar}
/>
))}
</div>
</div>
</Router>
)
}
最需要注意的是，我们已经将`s`属性传递给route.sidebar了` location`。这是示例的关键所在，也体现了我们之前创建的数组的重要性。现在，只要位置与 `location` 匹配，侧边栏组件就会被渲染。但是，我们并不想就此止步。我们还希望在位置与 `path` 匹配时，在应用程序的主体中渲染一个组件。为此，我们将再次使用 `map` 函数，但这次不是传递 ` location` ，而是传递`path` 。Routecomponentroutespathroutescomponent route.sidebarroute.main
render() {
return (
<Router>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '40%',
background: '#f0f0f0'
}}>
<ul style={{ listStyleType: 'none', padding: 0 }}>
<li><Link to="/">Home</Link></li>
<li><Link to="/bubblegum">Bubblegum</Link></li>
<li><Link to="/shoelaces">Shoelaces</Link></li>
</ul>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.sidebar}
/>
))}
</div>
<div style={{ flex: 1, padding: '10px' }}>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
</div>
</Router>
)
}
🕺. 现在，由于 React Router 允许我们在页面上渲染和匹配多个组件，并且由于我们将路由抽象为一个数组，因此当位置与sRoute匹配时，我们可以在页面的不同部分渲染不同的组件。Routepath
本文最初发表于TylerMcGinnis.com，是其React Router课程的一部分。
文章来源：https://dev.to/tylermcginnis/rendering-a-sidebar-or-breadcrumbs-with-react-router-v4-1m0i