react-router v4 参数和面包屑组件答案

【问题标题】：react-router v4 params and bread crumb componentreact-router v4 参数和面包屑组件
【发布时间】：2018-10-01 21:33:09
【问题描述】：

React 路由器是这样工作的：

<BrowserRouter>
  {/* the root router creates an "empty" match, so match.params = {} */}
  <Route path='/album/:albumID' component={Album}>
    {/* match.params = { albumID: '123' } */}
    <Album>
      {/* match.path = '/album/:albumID' */}
      <Route path={`${match.path}/song/:songID`} component={Song}>
        {/* match.params = { albumID: '123', songID: '456' } */}
        <Song>

上面的路由有动态参数。参数仅在特定路线中可用

我想创建一个通用的BreadCrumbs 组件，它会在相对路径之外呈现。

这在 react-router v4 中是不可能的，因为参数仅相对于特定路由可用。

除了解析处理htis的url之外似乎没有其他任何东西。

有人找到解决办法了吗？

这确实不好。

【问题讨论】：

这样的东西有用吗？ codesandbox.io/s/3r0q2pzq6m
不幸的是，只适用于一条路线，我真的需要所有路线。

标签： reactjs react-router react-router-v4

【解决方案1】：

答案是利用 React Router 的 v4 动态路由：

我最终做了这样的事情：

const routes: RoutePaths[] = [
  '/route/one/?:foo',
  //etc
];

    export class BreadCrumbProxy extends React.Component<RouteComponentProps<any> & DispatchProp<any>> {
      render() {
        return (
          <React.Fragment>
            <Switch>
              {routes.map(route => (
                <Route
                  key={route.toString()}
                  exact
                  path={route}
                  render={({ match }: RouteComponentProps<any>) => <ApplicationHeader {...match} />}
                />
              ))}
            </Switch>
          </React.Fragment>
        );
      }
    }

这会将上下文匹配传递给 BreadCrumb 组件。

【讨论】：