javascript - React 路由器 v4 面包屑

Question

我正在尝试实现 React Router Breadcrumbs for v4

以下是我的路线:

    const routes = {
      '/': 'Home',
      '/page1': 'Page 1',
      '/page2': 'Page 2'
    };

我可以使用这个库在我的应用程序中放置面包屑，但是我有以下问题:

阙。 #1:

当我点击 Home 时在我的面包屑中，我可以看到 URL 更改为 http://localhost:8080但是，浏览器仍然显示我所在的同一页面。

阙。 #2:

当我从第 1 页导航到第 2 页时，url从 http://localhost:8080/page1 更改至 http://localhost:8080/page2 .

因此显示的面包屑更改为 Home / Page 2而不是像 Home / Page 1 / Page 2 那样改变

我知道这可能是因为 url只有/page2在主机名之后。但是，我可以实现这样的显示吗:Home / Page 1 / Page 2 ？

下面是我的主App.jsx中的代码:

<Router>
  <div>
    <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
    <Route exact path="/" component={LandingPage}/>
    <Route path="/page1" component={Page1}/>
    <Route path="/page2" component={Page2}/>
  </div>
</Router>

如果我像下面那样使用面包屑，那么我的 page2 会呈现在 page1 的下面:

    <Router>
      <div>
        <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
        <Route exact path="/" component={LandingPage}/>
        <Route path="/page1" component={Page1}/>
        <Route path="/page1/page2" component={Page2}/>
      </div>
    </Router>

回答:

阙。 #1: 无需包装 <Breadcrumbs ..../>里面的元素<Router>应用程序每个组件内的元素。这可能是因为，包含 <Router>每个组件内的元素导致“嵌套”Router元素(注意我们在着陆页中也有 Router 标签)；这不适用于 react router v4 .

阙。 #2: 引用这里正式标记的答案(下面由 palsrealm 回答)

Answer 1

您的面包屑导航基于链接，它们按设计工作。要显示页面，您需要设置一个带有 Route 的 Switch，它会在路径改变时加载适当的组件。有点像

<Switch> 
    <Route path='/' component={Home}/>
    <Route path='/page1' component={Page1}/>
    <Route path='/page2' component={Page2}/>
</Switch>

如果您希望面包屑显示 Home/Page1/Page2 您的 routes 应该是 '/page1/page2' : 'Page 2'。 Route 也应相应更改。

编辑:您的路由器应该是

 <Router>
      <div>
        <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
        <Switch>
        <Route exact path="/" component={LandingPage}/>
        <Route exact path="/page1" component={Page1}/>
        <Route path="/page1/page2" component={Page2}/>
        </Switch>
      </div>
    </Router>