无法从 Route 变量路径中找到匹配项（未定义的属性（读取 'params'））

Question

我对 JavaScript 和 React 还很陌生，只是在学习一些 youtube 教程。我无法从 url "/room/:roomCode".

中获取 "roomCode"

Homepage.js

<Route path={"/room/:roomCode"} element={<Room />} />

Room.js

import React, {Component} from "react";

export default class Room extends Component {
    constructor(props) {
        super(props);
        this.roomCode = this.props.match.params.roomCode;
    }
    render() {
        return (
            <div>
                <h1>{this.roomCode}</h1>
            </div>
        );
    }
}

我无法打印房间代码，需要一步一步的指导来更改我的代码。

Answer 1

React 路由器 v6 已放弃对基于 class 的组件的支持。请参阅此 github 线程 https://github.com/remix-run/react-router/issues/8146

转换Room组件函数组件然后使用useParamsreact hook

我已将您的基于 class 的组件转换为函数组件。

import { useParams } from "react-router-dom";

const Room = () => {
  const { id } = useParams();
    
  return (
     <div>
        <h1>{id}</h1>
     </div>
  );
    
}

export default Room

编辑：

我注意到您的 route 路径周围有花括号，请删除它们，使其看起来像这样，

<Route path="/room/:roomCode" element={<Room />} />

无法从 Route 变量路径中找到匹配项（未定义的属性（读取 'params'））

Cannot find the match from the Route variable path (properties of undefined (reading 'params'))

parameters

reactjs

react-router

Homepage.js

Room.js