如何使用`navigate`来更新`useParams`钩子值？

Question

在 React 中，我有一个有效的浏览器路由：

<Route path="some/entity/:objectId?" element={<MyComponent />} />

这映射到函数

MyComponent

，它使用

useParams

钩子来获取可选

objectId

的值，如下所示：

const { objectId } = useParams();

现在，在我的一个活动中，我使用

navigate

对象（通过

useNavigate

挂钩）来更新 URL 的对象 ID 部分，如下所示：

const navigate = useNavigate();
[... later in some event handler ...]
const newObjectId = [...];
navigate(`/some/entity/${newObjectId}`);

URL 已更新。但是，我的组件没有通过

objectId

钩子获取新的

useParams

。它仍然具有旧的价值。我该如何解决这个问题？

Answer 1

确保你的组件没有被记忆或包装在 React.memo 中，这可能会阻止它在 URL 更改时重新渲染。

import React from 'react';

// This might prevent re-renders when `useParams` changes
const MyComponent = React.memo(() => {
  const { objectId } = useParams();
  return <div>Object ID: {objectId}</div>;
});

// Remove React.memo to allow re-renders
const MyComponent = () => {
  const { objectId } = useParams();
  return <div>Object ID: {objectId}</div>;
};

如果您使用 useEffect 或任何其他钩子，请确保 objectId 包含在依赖项数组中，以便在参数更改时触发必要的更新。

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  const { objectId } = useParams();
  
  useEffect(() => {
    console.log(`Object ID changed: ${objectId}`);
    // Your logic here
  }, [objectId]); // Make sure objectId is in the dependency array

  return <div>Object ID: {objectId}</div>;
};

如果组件卸载并重新安装，useParams 应该自动更新。确保组件根据 URL 更改正确处理重新安装。

import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  const { objectId } = useParams();
  return <div>Object ID: {objectId}</div>;
};

const App = () => {
  return (
    <Routes>
      <Route path="some/entity/:objectId?" element={<MyComponent />} />
    </Routes>
  );
};

如果这些都不适用，请考虑添加状态或使用 useEffect 来监视 objectId 并手动触发更新作为最后的手段。

import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const { objectId } = useParams();
  const [currentObjectId, setCurrentObjectId] = useState(objectId);
  
  useEffect(() => {
    setCurrentObjectId(objectId);
  }, [objectId]);
  
  return <div>Object ID: {currentObjectId}</div>;
};