ID 未由 React 路由器处理的 URL

Question

我在我的ReactJs应用程序中使用React Routerv4，看起来每当我有一个带有 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

经过大量测试，我找到了原因。每当链接到组件时，我们都必须在react-router-dom中使用NavLink或Link。

我注意到我在应用程序中使用NavLink时不一致。相反，我使用的是常规

<a href={myModuleUrl}>Module Name</a>.

一旦我切换到使用NavLink，它就可以按预期工作。