Question

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

2022-01-20

245

reactjs parameters react-router

我对 JavaScript 和 React 还很陌生，只是跟着一些 YouTube 教程学了学。我无法从网址 "/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>
        );
    }
}

我无法打印 roomCode，需要一步一步的说明来说明我需要在哪里更改代码。

Answer 1

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

将 Room 组件转换为函数组件，然后使用 useParams 反应钩子。

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

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 />} />