react-router v4 params和面包屑组件

时间:2018-04-21 08:45:29

标签: reactjs react-router react-router-v4

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中是不可能的,因为params仅相对于特定路由可用。

除了解析处理htis的URL之外,似乎没有。

有没有人找到解决方案?

这真的不太好。

1 个答案:

答案 0 :(得分:1)

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

我最终做了这样的事情:

#include <vector>    

class TreeNode {
    void inOrder(std::vector<double>& v) const
    {
        if (left)
            left->inOrder(v);
        v.push_back(value);
        if (right)
            right->inOrder(v);
    }

    TreeNode* left = nullptr;
    TreeNode* right = nullptr;
    double value;
};

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