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

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>
  );
}