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

【问题标题】：Link of 'react-router-dom' not working?'react-router-dom' 的链接不起作用？
【发布时间】：2017-06-09 10:16:33
【问题描述】：

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

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

这是我的 Footer 组件中使用 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 的代码后导致我的应用程序不呈现任何内容。帮忙？

【问题讨论】：

我也有同样的问题。你解决了吗？你能发布一个解决方案吗？
暂时我可能只是使用 react-router v3 作为快速解决方案，直到我有足够的时间阅读 react-router v4 --- 问题是 v3 与 v4

标签： javascript react-router react-router-dom

【解决方案1】：

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

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

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

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

【讨论】：