1

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

<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 的代码后导致我的应用程序不呈现任何内容。帮助？

4

1 回答 1

1

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

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

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

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

于 2018-01-21T21:35:45.127 回答