React Router Dom v6 - Uncaught TypeError: Cannot destructure property 'path' of 'matc-CodePudding

I have a problem after switching from React Router Dom v5 to v6.

I encounter this error that I can't solve.

Uncaught TypeError: Cannot destructure property 'path' of 'match' as it is undefined.

Here is what my app.jsx looks like

...
import { Home } from "home";
import { Listings } from "listings";
import { Navigate, Route, Routes, unstable_HistoryRouter as Router } from "react-router-dom";
...
import { history } from "_helpers";

export function App() {
  // const auth = useRecoilValue(authAtom);
  
  return (
    <WrapperPage>
      <Router history={history}>
        <Nav />
        <Alert />
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route path="/browse" element={<Listings />} />
          <Route path="*" element={<Navigate from="*" to="/" />} />
        </Routes>
      </Router>
    </WrapperPage>
  );

and my listings.jsx

import React from "react";
import { Route, Routes } from "react-router-dom";
import { WrapperPage } from "_components/pages";
import { List } from "./List";
import styles from "./styles.module.scss";

export function Listings({ match }) {
  const { path } = match;

  return (
    <WrapperPage className={`${styles.listing} py-5 px-md-5 px-sm-3`}>
      <Routes>
        <Route exact path={path} element={<List />} />
        {/* <Route path={`${path}/add`} component={AddEdit} /> */}
      </Routes>
    </WrapperPage>
  );
}

Error occurs when changing page from '/' to '/browse' (listings)

CodePudding user response：

Follow the below procedure to migrate from React Router Dom v5 to v6.

First of all, remove the current version of react router dom from dev dependencies,

  "devDependencies": {
    "react-router-dom": "^5.3.0"
  }

For that delete,

"react-router-dom": "^5.3.0"

Install react router dom v6.

npm i -D [email protected]

Now your devDependencies should be like,

  "devDependencies": {
    "react-router-dom": "^6.3.0"
  }

Use the below code to apply react router dom v6,

App.js

import { Home } from "./home";
import { Listings } from "./listings";
import {
  Navigate,
  Route,
  Routes,
  BrowserRouter as Router
} from "react-router-dom";

export function App() {
  // const auth = useRecoilValue(authAtom);

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/browse" element={<Listings />} />
        <Route path="*" element={<Navigate from="*" to="/" />} />
      </Routes>
    </Router>
  );
}

export default App;

home.jsx

export function Home() {
    return <h1>Hello, Home</h1>;
}

listing.jsx

export function Listings(props) {
    return <h1>Hello, Listing</h1>;
}

CodePudding user response：

You have to use useMatch for react-router-dom 6, read the doc for more info: https://reactrouter.com/docs/en/v6/upgrading/reach#usematch