Cannot read properties of undefined (reading 'params') in BookingCar.js page - reactjs

Question

I am getting error like TypeError: Cannot read properties of undefined (reading 'params') in BookingCar.js Page and my error image and code is
App.js code is
import "./App.css";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
import BookingCar from "./pages/BookingCar";
import "antd/dist/antd.css";
import { ProtectedWrapper } from "./components/ProtectedRoutes";
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route
path="/"
exact
element={
<ProtectedWrapper>
<Home />
</ProtectedWrapper>
}
></Route>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route
path="/booking/:carid"
element={
<ProtectedWrapper>
<BookingCar />
</ProtectedWrapper>
}
/>
</Routes>
</Router>
</div>
);
}
export default App;
ProtectedRoute.js code is
import { Navigate } from "react-router-dom";
export function ProtectedWrapper({ children }) {
if (localStorage.getItem("user")) {
return children;
} else {
return <Navigate to="/login" replace />;
}
}
Home.js code is
import React, { useEffect } from "react";
import DefaultLayout from "../components/DefaultLayout";
import { useSelector, useDispatch } from "react-redux";
import { getAllCars } from "../redux/actions/carsActions";
import { Row, Col } from "antd";
import Spinner from "../components/Spinner";
import { Link } from "react-router-dom";
function Home() {
const { cars } = useSelector((state) => state.carsReducer);
const { loading } = useSelector((state) => state.alertsReducer);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getAllCars());
}, []);
return (
<DefaultLayout>
{loading == true && <Spinner />}
<Row justify="center" gutter={16} className="mt-5">
{cars.map((car) => {
return (
<Col lg={5} sm={24} xs={24}>
<div className="car p-2 bs1">
<img src={car.image} className="carimg" />
<div className="car-content d-flex align-items-center justify-content-between">
<div>
<p>{car.name}</p>
<p>{car.rentPerHour} Rent Per Hour /-</p>
</div>
<div>
<button className="btn1 mr-2">
<Link to={`/booking/${car._id}`}>Book Now</Link>
</button>
</div>
</div>
</div>
</Col>
);
})}
</Row>
</DefaultLayout>
);
}
export default Home;
BookingCar.js
import React, { useEffect } from "react";
import DefaultLayout from "../components/DefaultLayout";
import { useSelector, useDispatch } from "react-redux";
import { getAllCars } from "../redux/actions/carsActions";
function BookingCar({ match }) {
const { cars } = useSelector((state) => state.carsReducer);
const { loading } = useSelector((state) => state.alertsReducer);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getAllCars());
}, []);
return (
<DefaultLayout>
<h1>Booking Page</h1>
<h1>Car Id = {match.params.carid}</h1>
</DefaultLayout>
);
}
export default BookingCar;
In BookingCar.js i am trying to get the car details like id but i am getting error TypeError: Cannot read properties of undefined (reading 'params')
So please help me how to solve this issue.

Answer 1

In react-router-dom v6 there are no longer any route props, so no history, location, or match props are passed from route to component. In fact, if you look at the JSX it should be quite clear that no props are being passed to BookingCar.
<Route
path="/booking/:carid"
element={
<ProtectedWrapper>
<BookingCar />
</ProtectedWrapper>
}
/>
In RRDv6 you must use the React hooks.
import { useParams } from 'react-router-dom';
function BookingCar() {
const { carid } = useParams();
const { cars } = useSelector((state) => state.carsReducer);
const { loading } = useSelector((state) => state.alertsReducer);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getAllCars());
}, []);
return (
<DefaultLayout>
<h1>Booking Page</h1>
<h1>Car Id = {carid}</h1>
</DefaultLayout>
);
}