ID未由React Router

Question

我在我的React Router应用中使用ReactJs v4，看起来每当我有一个带有ID的路径时，React Router都没有处理它，因为我看到页面刷新我在这个过程中丢失了Redux商店中的所有数据。

这是我的路线部分：

<Switch>
   <Route exact path="/member" component={Home} />
   <Route exact path="/member/accounts" component={Accounts} />
   <Route path="/member/projects/profile/:id" component={ProjectProfile} />
</Switch>

以下是我如何生成链接。这是用户点击时的链接，我在浏览器上看到刷新。

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

... omitted for brevity
const profileUrl = "/member/projects/profile/" + project.id;

<Link to={profileUrl}>Click here</Link>

我的路线中定义的其他链接工作正常，例如家和帐户。

我在这里做错了什么？

Answer 1

您是否将onClick事件处理程序传递给Link组件？

如果是这样，请确保处理程序的一切正常。您可以尝试暂时删除它，以便调试刷新。

致谢：

1. https://stackoverflow.com/a/46115304/4312466
2. https://github.com/ReactTraining/react-router/pull/4066#issuecomment-383910759

Answer 2

经过大量测试后，我找到了原因。每当链接到组件时，我们必须使用list或NavLink {/ 1}}。

我注意到在我的应用中使用Link并不一致。相反，我使用常规

react-router-dom。

切换到使用NavLink后，它按预期工作。