React Router - 制作面包屑答案

【问题标题】：React Router - Making a breadcrumbsReact Router - 制作面包屑
【发布时间】：2018-09-19 21:30:35
【问题描述】：

我正在尝试在react-router-dom 的帮助下制作一个Breadcrumbs 组件，但我有几个问题

假设给了我一条如下所示的路线：

breadcrumbRoutes: [
    {
      path: '/devicePolicies',
      exact: true,
      name: "Device Policies",
      main: () => <h2>Device Policies View</h2>
    },
    {
      path: '/devicePolicies/controlPanel',
      exact: true,
      name: "Control Panel",
      main: () => <h2>Control Panel View</h2>
    },
    {
      path: '/devicePolicies/controlPanel/settings',
      exact: true,
      name: "Settings",
      main: () => <h2>Settings View</h2>
    }
  ]

目前，我的Breadcrumbs 组件会将其呈现为类似于Device Policies/Control Panel/Settings。但是，它没有正确呈现与最新路径 /devicePolicies/controlPanel/settings 关联的正确组件。例如，它不是渲染settings 组件，而是渲染Home 组件。

面包屑.js

Class Breadcrumbs extend Component

insertBreadcrumbs() {
var routes = this.props.routes;

    return (
      <div style={{display: 'flex'}}>
          <ul className="breadcrumb">
            { this.insertListElement(routes) }
          </ul>
          {routes.map((route) => (
             <Route
                  key={route.path}
                  path={route.path}
                  exact={route.exact}
                  component={route.main}
             />
          ))}
     </div>
    );
}
render() {
    return (
        <Router>
              { this.insertBreadcrumbs() }
        </Router>
    );
}

App.js

<Breadcrumbs 
        name="breadcrumbRoutes"
        routes={this.state.breadcrumbRoutes}
        onChange={this.handleChange}
 />

如何使加载的视图始终成为路径的最后一个组件？在这个例子中，我要加载settings的组件

非常感谢您的帮助！

【问题讨论】：

我对你的实现有点困惑。我们可以看到更多代码吗？
@mattdevio 是的，我已经添加了更多代码。希望这会让我的问题更清楚
@Tim insertListElement 函数在做什么？我们能看到吗？

标签： reactjs react-router

【解决方案1】：

我已经弄清楚我的问题是什么。事实证明，我正在错误地测试行为。我试图强制我的路由器将位置设置为settings，而不是创建一个具有to="devicePolicies/controlPanel/settings 的Link。通过插入Link，我能够正确将我的路由器位置设置为settings，然后正确呈现相应的组件。谢谢大家的意见！

【讨论】：