单击链接时,React路由器不会路由

时间:2017-10-15 05:25:39

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

所以我有一个带有几个链接的标题组件:

{
    this.props.cats.map(x =>
        <li className="nav-item" key={x.path}><Link className="nav-link" to={x.path}>{x.name}</Link></li>)
}

上面的代码片段是我用来呈现链接的代码

然后在我的index.js(root)中使用<BrowserRouter/>,它包含整个元素。

我的问题是我已实施的路由。

<Header />
<Switch>
  <Route exact path='/' component={(props) => <PostList cat='all' posts={this.props.posts} />} />
  <Route exact path='/:category' component={(props) => {
    console.log(props.match.url)
    return <PostList cat='filter' posts={this.props} />
  }} />
</Switch>

当我点击链接带我说路径&#34; / test&#34;它应该由第二个Route元素拾取,每次更改它应该显示链接,它不会。只有在我刷新硬盘时它才会改变。

关于我可能做错什么的任何想法?

编辑*包含标题组件

<nav className="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div className="container">
          <Link className="navbar-brand" to='/'>Navbar</Link>
          <button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="ml-auto navbar-nav">
              {
                this.props.cats.map(x =>
                  <li className="nav-item" key={x.path}><Link className="nav-link" to={x.path}>{x.name}</Link></li>)
              }
            </ul>
          </div>
        </div>
      </nav>

1 个答案:

答案 0 :(得分:0)

链接现在是“ react-router-dom ”的一部分,请确保您已从那里导入,如果这不能解决您的问题,请尝试使用 withRouter

包装您的组件