使用react-router useParams()时触发TypeError: 无法读取'basename'属性

问题根源 #

你的代码存在三个核心错误：

1. 导入错误：错误地将BrowserRouter别名成useParams，完全混淆了路由容器组件和参数Hook的作用
2. Hook使用场景错误：useParams是React Hook，不能在类组件中直接使用，Hook仅允许在函数组件或自定义Hook的顶层调用
3. 解构错误：useParams()返回的是路由参数的直接键值对，并非嵌套在params属性中的对象

正确解决方案 #

方案1：将类组件改为函数组件（推荐，符合React Router v6设计理念） #

修改后的代码如下：

// 正确导入useParams
import { useParams } from "react-router-dom";

// 改为函数组件
function Post() {
  // 直接解构路由参数，若路由为/post/:postId，则写{ postId }
  const { postId } = useParams();
  
  console.log(postId);

  return(
    // 你的组件内容
  )
}

export default Post;

方案2：为类组件封装参数获取逻辑（仅兼容类组件时使用） #

若必须保留类组件，可通过自定义高阶组件（HOC）传递路由参数：

import React from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";

// 自定义高阶组件，将路由相关属性注入类组件props
function withRouter(Component) {
  return function WrappedComponent(props) {
    const params = useParams();
    const location = useLocation();
    const navigate = useNavigate();
    return <Component {...props} params={params} location={location} navigate={navigate} />;
  };
}

class Post extends React.Component {
  render() {
    // 从props中获取参数
    const { params } = this.props;
    console.log(params);

    return(
      // 你的组件内容
    )
  }
}

// 用高阶组件包装类组件
export default withRouter(Post);

额外注意事项 #

• 确保Post组件被包裹在BrowserRouter（或HashRouter）内部，示例根组件代码：

  import { BrowserRouter, Routes, Route } from "react-router-dom";
  import Post from "./Post";
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          {/* 定义带参数的路由，例如/post/:postId */}
          <Route path="/post/:postId" element={<Post />} />
        </Routes>
      </BrowserRouter>
    );
  }
  

• 路由参数的名称要和useParams解构的名称完全匹配，比如路由是/post/:id，则解构const { id } = useParams()

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