ReactJS动态路由props为空问题求助

我写了第一个React应用，尝试从props里获取URL中的uuid，但props始终是空对象，页面加载也没报错，搜了很多方案都没用。

App.js代码：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Layout from "./layouts/Backend";
import Language from "./pages/languages/index";
import LanguageCreate from "./pages/languages/create";
import LanguageEdit from "./pages/languages/edit";

...

export default () => {
   return (
      <BrowserRouter>
         <Routes>
            <Route path="/" exact element={<Layout />}>
               <Route path="/">
                  <Route path="/" element={<Language />} />
                  <Route path={"/language/create"} element={<LanguageCreate />} />
                  <Route path={"/language/edit/:uuid"} element={<LanguageEdit />} />
               </Route>

               ...
            </Route>
         </Routes>
      </BrowserRouter>
   );
};

pages/languages/edit.jsx代码：

import React from "react";

export default class LanguageEdit extends React.Component {
   state = {
      uuid: null,
   };

   componentDidMount() {
      // this.setState({
      //    uuid: this.props.match.params.uuid,
      // });

      console.log(this.props);
   };

   render() {
      return <div>Language Edit...</div>
   }
};

问题原因 #

你用的是React Router v6，这个版本和v5的路由参数传递逻辑完全不同：

1. v6不再自动给组件注入match、location、history这些路由相关props，不管是类组件还是函数组件，都不会从props拿到这些对象。
2. 你之前写的this.props.match.params.uuid是v5的写法，在v6里完全不适用。

解决方法 #

因为你用的是类组件，v6没有原生支持类组件的路由参数获取，有两种可行方案：

方案1：使用withRouter高阶组件（兼容类组件）

React Router v6移除了内置的withRouter，需要安装兼容包来实现：

1. 安装依赖：

npm install react-router-dom-v5-compat

2. 修改edit.jsx代码：

import React from "react";
import { withRouter } from 'react-router-dom-v5-compat';

class LanguageEdit extends React.Component {
   state = {
      uuid: null,
   };

   componentDidMount() {
      const uuid = this.props.match.params.uuid;
      this.setState({ uuid });
      console.log(uuid);
   };

   render() {
      return <div>Language Edit... UUID: {this.state.uuid}</div>
   }
};

// 用withRouter包裹组件，注入路由相关props
export default withRouter(LanguageEdit);

方案2：将类组件改为函数组件（推荐，符合v6设计）

直接转换成函数组件，用v6内置的useParams钩子获取URL参数：

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

export default function LanguageEdit() {
   const [uuid, setUuid] = useState(null);
   const params = useParams(); // 获取URL中的参数对象

   useEffect(() => {
      setUuid(params.uuid);
      console.log(params.uuid);
   }, [params]);

   return <div>Language Edit... UUID: {uuid}</div>
};

额外优化建议 #

你的路由嵌套存在冗余，可以简化为更符合v6规范的写法：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      {/* 用index代替path="/"作为默认子路由 */}
      <Route index element={<Language />} />
      <Route path="language/create" element={<LanguageCreate />} />
      <Route path="language/edit/:uuid" element={<LanguageEdit />} />
      ...
    </Route>
  </Routes>
</BrowserRouter>

内容的提问来源于stack exchange，提问作者Mr.Singh