Estoy aprendiendo a usar useMatch() desde "react-router-dom" . Recibo el siguiente error y mi página web está en blanco:
Uncaught TypeError: Cannot read properties of undefined (reading 'path') at matchPath (index.tsx:1148) at index.tsx:481 at mountMemo (react-dom.development.js:15846) at Object.useMemo (react-dom.development.js:16219) at useMemo (react.development.js:1532) at useMatch (index.tsx:481) at About (About.js:7) at renderWithHooks (react-dom.development.js:14985) at mountIndeterminateComponent (react-dom.development.js:17811) at beginWork (react-dom.development.js:19049)mi código está abajo
import React from "react" import { useMatch } from "react-router-dom" import { Link, Route } from "react-router-dom" import SinglePage from "./SinglePage" const About = () => { const { url, path } = useMatch() console.log("hello usematch!", useMatch()) return ( <div> <ul> <li> <Link to={`${url}/about-app`}>About App</Link> </li> <li> <Link to={`${url}/about-author`}>About Author</Link> </li> </ul> <Route path={`${path}/:slug`}> <SinglePage /> </Route> </div> ) } export default About Y debajo está el archivo index.js donde llegamos a esta página:
import React from "react"; import ReactDOM from "react-dom"; //component file import TodoContainer from "./functionBased/components/TodoContainer"; import { Route, Routes, BrowserRouter as Router } from "react-router-dom"; //stylesheet import "./functionBased/App.css"; import About from "./pages/About"; import NotMatch from "./pages/NotMatch"; //stylesheet // import "./App.css" ReactDOM.render( <React.StrictMode> <Router> <> <Routes> <Route exact path="/" element={<TodoContainer />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotMatch />} /> </Routes> </> </Router> </React.StrictMode>, document.getElementById("root") );Intenté revisar los documentos de API, pero no tengo claro por qué esto no funciona y cómo hacer que se cargue la página. Estoy tratando de devolver la coincidencia de ruta actual más cercana dentro del contexto de donde se llama.
Soy bastante nuevo en reaccionar y apis de router .
Muchas gracias
En react-router-dom v6, el useMatch toma un valor de pattern requerido que es una cadena que representa una ruta o un objeto PathPattern .
declare function useMatch<ParamKey extends string = string>( pattern: PathPattern | string ): PathMatch<ParamKey> | null;PathPattern
interface PathPattern { path: string; caseSensitive?: boolean; end?: boolean; } Por lo que puedo decir, parece que está intentando crear un enrutamiento "anidado" usando el mismo patrón que se usó en v5. Esto no funciona igual en v6, aunque v6 puede utilizar enlaces/enrutamiento relativos al no especificar una ruta absoluta que comience con un "/" inicial.
Consulte Rutas y enlaces relativos en la guía de migración v5.
Aplicar enlace/enrutamiento relativo:
const About = () => { return ( <div> <ul> <li> <Link to="about-app">About App</Link> </li> <li> <Link to="about-author">About Author</Link> </li> </ul> <Route path=":slug"> <SinglePage /> </Route> </div> ) } react-router-dom v6 ahora también usa siempre la coincidencia de ruta exacta, por lo que para garantizar que los componentes Route anidados puedan coincidir y renderizarse, debe actualizar las rutas inferiores para permitir la coincidencia de subruta. Si "/about" representa subrutas, agregue un comparador de comodines.
aplicación
<Router> <Routes> <Route exact path="/" element={<TodoContainer />} /> <Route path="/about/*" element={<About />} /> <Route path="*" element={<NotMatch />} /> </Routes> </Router>Parece que está utilizando el Router de react-router-dom , y no el de la biblioteca react-location , que es el que proporciona el gancho useMatch() que necesita.
Debe usar el Router desde react-location y luego vincular su <Router> con la biblioteca de react-location pasando una instancia de ReactLocation a través de la propiedad de location . Me baso en los documentos a los que se vinculó en su pregunta.
Su index.js probablemente debería verse algo como
import React from "react"; import ReactDOM from "react-dom"; //component file import TodoContainer from "./functionBased/components/TodoContainer"; import { ReactLocation, Router } from 'react-location'; //stylesheet import "./functionBased/App.css"; import About from "./pages/About"; import NotMatch from "./pages/NotMatch"; //stylesheet // import "./App.css" const reactLocation = new ReactLocation(); const routes = [ { path: '/', element: <TodoContainer />, }, { path: '/about', element: <About />, }, { element: <NotMatch />, }, ]; ReactDOM.render( <React.StrictMode> <Router location={reactLocation} routes={routes}> </Router> </React.StrictMode>, document.getElementById("root") ); Este artículo podría ayudar a aclarar las diferencias sobre cómo usar react-router-dom vs react-location .