javascript - 'react-router-dom' 的链接不起作用？

标签 javascript react-router react-router-dom

这是我的根组件中的代码:

<BrowserRouter>
  <Route path="/(:filter)" component={App}/>
</BrowserRouter>

这是我的页脚组件中使用 FilterLink 组件的代码

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="all"> 
      All 
    </FilterLink>
    {", "}
    <FilterLink filter="active">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="completed">
      Completed
    </FilterLink>
  </p>
);

现在这是我的 FilterLink 中的代码，它使用来自“react-router-dom”的链接不起作用

import { Link } from 'react-router-dom';

const FilterLink = ({ filter, children }) => (
  <Link 
    to={ filter === 'all' ? '' : filter }
    activeStyle={{
      textDecoration: 'none',
      color: 'black'
    }}
  >
  {children}
  </Link>
);

我找不到该错误，因为它没有抛出任何错误，但只是导致我的应用程序在我应用此使用 Link 的代码后不渲染任何内容。帮忙？

最佳答案

我也遇到过同样的问题。这是因为可选参数的语法发生了变化。

将 /(:filter) 更改为 /:filter?

这里是使用react-router v4的指南: https://redux.js.org/docs/advanced/UsageWithReactRouter.html#connecting-react-router-with-redux-app

我在这个例子中还遇到了另一个问题。 NavLink 中缺少 exact 属性，因此如果您单击 FilterLink“已完成”或“事件”，那么您仍然拥有事件的“全部”。

关于javascript - 'react-router-dom' 的链接不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44455206/