URL ID 未被 React Router 处理

Question

我在我的 ReactJs 应用程序中使用 React Router 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>

下面是我生成 link 的方式。这是 link 当用户点击时，我在浏览器上看到刷新。

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

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

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

我的路线中定义的其他 links 工作正常，例如家庭和账户。

我做错了什么？

Answer 1

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

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

学分：

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，它就按预期工作了。

URL ID 未被 React Router 处理

URL with ID not handled by React Router

reactjs

react-router

react-router-v4

react-router-dom