React Router v6.14配置疑问：如何从URL获取参数传递给组件

你的写法不可行，原因是useParams是React Router的Hook，必须在路由渲染的组件或其后代组件内部调用，而你在路由配置的外层直接调用GetParam()，此时没有路由上下文，useParams无法获取到参数，会返回undefined。

下面是两种正确的实现方式：

方式一：在目标组件内部直接使用useParams #

直接在FormAuth组件里调用useParams获取参数，这是最简洁的方案：

// FormAuth.tsx
import { useParams } from "react-router-dom";

const FormAuth = () => {
  const { authPath } = useParams<string>();
  
  // 这里就可以使用authPath了
  return <div>当前路径参数：{authPath}</div>;
};

export default FormAuth;

然后路由配置简化为：

import { createBrowserRouter } from "react-router-dom";
import DefaultLayout from "../layout/DefaultLayout";
import FormAuth from "../pages/auth/Auth";
import NotFound404 from "../pages/notfound404/NotFound404";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <DefaultLayout />,
  },
  {
    path: "/:authPath",
    element: <FormAuth />, // 不再需要手动传参
  },
  {
    path: "*",
    element: <NotFound404 />,
  },
]);

方式二：用包裹组件传递参数（若需通过props传递） #

如果一定要通过props把参数传给FormAuth，可以写一个包裹组件，在包裹组件里获取参数再传递：

import { createBrowserRouter, useParams } from "react-router-dom";
import DefaultLayout from "../layout/DefaultLayout";
import FormAuth from "../pages/auth/Auth";
import NotFound404 from "../pages/notfound404/NotFound404";

// 包裹组件，负责获取参数并传递给FormAuth
const FormAuthWrapper = () => {
  const { authPath } = useParams<string>();
  return <FormAuth name={authPath} />;
};

export const router = createBrowserRouter([
  {
    path: "/",
    element: <DefaultLayout />,
  },
  {
    path: "/:authPath",
    element: <FormAuthWrapper />, // 使用包裹组件
  },
  {
    path: "*",
    element: <NotFound404 />,
  },
]);

这样FormAuth就可以通过props接收参数：

// FormAuth.tsx
interface FormAuthProps {
  name?: string;
}

const FormAuth = ({ name }: FormAuthProps) => {
  return <div>传递的参数：{name}</div>;
};

export default FormAuth;

关键注意点 #

• useParams只能在路由组件树内部使用，也就是被createBrowserRouter渲染的组件或其子组件中调用。
• 路由配置中的element是React元素，在创建路由时就会被求值，此时还没有路由上下文，所以不能在这里直接调用Hook。

内容的提问来源于stack exchange，提问作者dark123