Question

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

<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的代码后，我的应用程序无法呈现任何内容。帮助

Answer 1

我有同样的问题。这是因为可选参数的语法更改。

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

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

我在这个例子中遇到了另一个问题。 NavLink中缺少exact道具，因此如果您点击FilterLink＆＃34;已完成＆＃34;或者＆＃34;活跃＆＃34;然后你仍然活跃＆＃34;所有＆＃34;。

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

1 个答案: