React.js 中使用 useParams 的未定义参数

Question

我遇到了一个问题，尽管在我的 React 应用程序中正确配置了路由并使用了 useParams() ，但参数 language、from 和 to 都记录为未定义。设置如下：

const { language, from, to } = useParams();

<Route
  key="/:language/:from/:to"
  path="/:language/:from/:to"
  element={<Localized handleTarget={handleTarget} handleSource={handleSource} langs={langs} />}
/>

useEffect(() => {
  console.log("Params from URL:", { language, from, to });
}, [language, from, to]);

我使用的URL格式是http://127.0.0.1:5173/es/ko/de。尽管如此，所有三个参数都记录为未定义。我已经检查了路由顺序、组件放置、路由器配置、URL 格式和路由器版本，但问题仍然存在。

任何人都可以帮助确定可能导致此设置中的参数未定义的原因吗？任何帮助将不胜感激！

我尝试配置 React Router 使用 useParams() 钩子捕获 URL 参数（语言、来源和目标），然后将这些参数记录在组件中。我的期望是从 URL 中正确捕获参数并按预期记录。然而，尽管正确配置了路由并使用了 useParams()，所有三个参数都记录为未定义。我验证了路由顺序、组件放置、路由器配置、URL 格式和路由器版本，但问题仍然存在。

Answer 1

useParams 钩子在错误的地方被调用。您应该从分配给该路由的组件内部“本地化”访问 url 参数。

您应该在“本地化”组件中将此 useEffect 称为类似

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

const Localized = ({ handleTarget, handleSource, langs }) => {
  const { language, from, to } = useParams();

  useEffect(() => {
    console.log("Params from URL:", { language, from, to });
  }, [language, from, to]);

  return (
    <div>
      <p>This is a paragraph inside the Localized component.</p>
    </div>
  );
}

<Route
  key="/:language/:from/:to"
  path="/:language/:from/:to"
  element={<Localized handleTarget={handleTarget} handleSource={handleSource} langs={langs} />}
/>