React Router v6组件加载时useParams()返回空对象问题排查

• 未配置有效的路由匹配规则：你虽然导入了Routes、Route组件，但代码中没有编写任何路由匹配逻辑，React Router 无法识别URL中哪部分属于路径参数，也无法建立参数名和参数值的映射关系。
• useParams()调用位置不符合规则：React Router v6 中，useParams 仅能在被匹配渲染的组件及其子组件中读取到当前路由的参数，你的App组件本身没有被任何带参数的路由规则包裹，上下文里没有参数数据，自然始终返回空对象。
• 额外问题：JSX中写样式类使用了class属性，React 中需要替换为className，否则会抛出语法警告。

1. 确认入口文件配置路由容器 #

首先打开src/index.js，确保整个应用被路由容器包裹，这是React Router 正常工作的前提：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

2. 修改App.js 配置路由规则 #

配置带路径参数的路由匹配规则，将需要读取参数的业务逻辑放到Route渲染的组件内，修正后完整代码如下：

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { connect } from "./redux/blockchain/blockchainActions";
import { Routes, Route, useParams } from "react-router-dom";

// 业务组件放在Route下渲染，可正常读取路由参数
const BlockchainApp = () => {
  const dispatch = useDispatch();
  const blockchain = useSelector((state) => state.blockchain);
  // 解构获取路由配置中定义的identifier参数
  const { identifier } = useParams();

  const getData = () => {
    console.log("获取到路径参数: ", identifier);
    if (identifier) {
      alert(`路径参数存在：${identifier}`);
    }
  };

  useEffect(() => {
    getData();
  }, [blockchain.account, identifier]);

  return (
    <div>
      {blockchain.account === "" ||
      blockchain.smartContract === null ||
      !identifier ? (
        <div>
          <p style={{ textAlign: "center" }}>
            Connect to the network
          </p>
          <button
            className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
            onClick={(e) => {
              e.preventDefault();
              dispatch(connect());
              getData();
            }}
          >
            <svg
              className="fill-current w-4 h-4 mr-2"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
            >
              <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
            </svg>
            <span>CONNECT</span>
          </button>
          {blockchain.errorMsg !== "" ? (
            <p style={{ textAlign: "center" }}>
              {blockchain.errorMsg}
            </p>
          ) : null}
        </div>
      ) : (
        <div>
          <p>Logged in，当前路径参数：{identifier}</p>
        </div>
      )}
    </div>
  )
}

function App() {
  return (
    <>
      <h1 className="text-3xl font-bold underline">Welcome to the App</h1>
      <Routes>
        {/* 匹配根路径下的一级路径，映射为identifier参数 */}
        <Route path="/:identifier" element={<BlockchainApp />} />
        {/* 匹配无参数的首页路径，避免访问根路径报错 */}
        <Route path="/" element={<BlockchainApp />} />
      </Routes>
    </>
  );
}

export default App;

配置完成后访问https://你的域名/test123时，路由会自动把test123赋值给identifier参数，组件挂载、点击按钮时都能正常读取到该值，符合预期需求。如果需要匹配多级路径参数，可调整path规则，例如/asset/:chain/:tokenId即可同时读取chain、tokenId两个参数。

内容的提问来源于stack exchange，提问作者Carol.Kar