如何在同一路由路径上重新渲染组件（链接，V6）reactjs

Question

我有一个侧边栏菜单可以更改页面

我发现如果我单击当前路径的菜单项，页面将不会触发重新渲染。

（例如当前路径是 /user 并单击相同的路径 /user ）

进入页面时它会调用 useEffect 来获取数据，但我想再次单击相同的链接来重新加载数据而不是重新加载页面

我有以下 React 路由器。

 <Routes>
   <Route path="" element={<MainLayout />}>
     <Route path="/user" element={<User />} />
     <Route path="/contact" element={<Contact />} />
     <Route exact path="/" element={<Login />} />
   </Route>
</Routes>

MainLayout.jsx

<Layout>
      <Sidebar />
      <Layout>
        <Header></Header>

        <Content >
          <Outlet />
        </Content>

        <Footer >
           Sorftware
        </Footer>
      </Layout>
</Layout>

侧边栏.jsx

<Menu>
  <Menu.Item key="users" >
     <Link to="/user">User</Link>
  </Menu.Item>
</Menu>

*更新：我删除了index.js， CustomRouter.jsx因为它似乎与我的问题无关

Answer 1

如果您正在寻找一种在单击 a 时触发路由组件重新渲染的方法，Link那么我建议使用传递不同对象的导航操作，即使用哈希或传递一些附加状态，每次单击链接时都会有所不同。

例子：

import { Link, useNavigate } from "react-router-dom";
import { nanoid } from "nanoid";

...

const navigate = useNavigate();

...

<Link
  to="/user"
  onClick={(e) => {
    e.preventDefault();
    navigate("/user", { state: nanoid() });
  }}
>
  User
</Link>

这里的示例使用Link组件的toprop 来提供有效的目标并提供所有可访问性组件。然后onClick附加一个处理程序以防止发生默认链接操作，以便我们可以在每次调用时传递一些不同且随机的附加状态负载。

useEffect如果您愿意，可以使用此传递的状态作为挂钩依赖项。

import { Link, useNavigate } from "react-router-dom";
import { nanoid } from "nanoid";

...

const navigate = useNavigate();

...

<Link
  to="/user"
  onClick={(e) => {
    e.preventDefault();
    navigate("/user", { state: nanoid() });
  }}
>
  User
</Link>

演示