CODEWITHSUNDEEP
reactjsparametersreact-router
Adi
Adi

Reputation: 1085

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

I am pretty new to JavaScript and React, Just following some youtube tutorials. I am not able to get the "roomCode" from the url "/room/: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>
        );
    }
}

I am not able to print roomCode, need step by step instruction where I need to change my code.

Upvotes: 0

Views: 266

Answers (1)

Sangeet Agarwal
Sangeet Agarwal

Reputation: 1825

React router v6 has dropped support for class based components. See this github thread https://github.com/remix-run/react-router/issues/8146

Convert Room component function component and then use the useParams react hook.

I've converted your class based component to a function component.

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

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

export default Room

Edit:

I noticed you have curly braces around your route path, remove those so it should look like so,

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

Upvotes: 1

Related Questions