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

Question

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>

以上路由有动态参数。 params 仅在特定路线可用

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

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

除了解析处理 htis 的 url 之外似乎没有其他方法。

有人找到解决办法了吗？

这真不行

Answer 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 组件中。

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

react-router v4 params and bread crumb component

reactjs

react-router

react-router-v4