Tengo un problema después de cambiar de React Router Dom v5 a v6.
Me encuentro con este error que no puedo resolver.
Error de tipo no capturado: no se puede desestructurar la propiedad 'ruta' de 'coincidencia' porque no está definida.
Así es como se ve mi app.jsx
... 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> ); y mis 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> ); } Se produce un error al cambiar la página de '/' a '/browse' (listados)
Siga el siguiente procedimiento para migrar de React Router Dom v5 a v6.
En primer lugar, elimine la versión actual de react router dom de las dependencias de desarrollo,
"devDependencies": { "react-router-dom": "^5.3.0" }Para esa eliminación,
"react-router-dom": "^5.3.0"Instale reaccionar enrutador dom v6.
npm i -D react-router-dom@6.3.0Ahora sus devDependencies deberían ser como,
"devDependencies": { "react-router-dom": "^6.3.0" }Utilice el siguiente código para aplicar reaccionar router dom v6,
Aplicación.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;inicio.jsx
export function Home() { return <h1>Hello, Home</h1>; }listado.jsx
export function Listings(props) { return <h1>Hello, Listing</h1>; }Debe usar useMatch para react-router-dom 6, lea el documento para obtener más información: https://reactrouter.com/docs/en/v6/upgrading/reach#usematch