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)
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 react-router-dom@6.3.0
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>;
}
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