Para resumir, quiero que los enlaces funcionen, pero este error Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') sigue apareciendo. Reinstalé los paquetes, reestructuré el código varias veces, volví a abrir la reacción, eliminé y agregué / ya que no cambió. Es un proyecto tan simple pero viene con un error tan frustrante. Aquí está el código, espero que tus ojos vean lo que los míos no. Esta es App.js
import Category from "./components/Category"; import Pages from "./pages/Pages"; import { BrowserRouter as Router } from "react-router-dom"; function App() { return ( <div className="App"> <Router> <Category></Category> <Pages></Pages> </Router> </div> ); } export default App; Esta es Category.jsx :
import { FaPizzaSlice, FaHamburger } from "react-icons/fa"; import { GiNoodles, GiChopsticks } from "react-icons/gi"; import styled from "styled-components"; import { NavLink } from "react-router-dom"; function Category() { return ( <List> <NavLink to={'/cuisine/Italian'}> <FaPizzaSlice /> <h4>Italian</h4> </NavLink> <NavLink to={'/cuisine/American'}> <FaHamburger /> <h4>American</h4> </NavLink> <NavLink to={'/cuisine/Thai'}> <GiNoodles /> <h4>Thai</h4> </NavLink> <NavLink to={'/cuisine/Japanese'}> <GiChopsticks /> <h4>Japanese</h4> </NavLink> </List> ); } const List = styled(NavLink)` display: flex; justify-content: center; margin: 2rem 0rem; `; export default Category; Y esto es Pages.jsx :
import Home from "./Home"; import React from "react"; import { Route, Routes} from "react-router-dom"; //import { filterProps } from "framer-motion"; import Cuisine from "./Cuisine"; function Pages() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="cuisine/*" element={<Cuisine />} /> </Routes> ); } export default Pages; No tengo idea de qué más probar. Thank you :)
Hay dos cosas que hacer aquí.
Pages.jsx:
Ponga / delante de la ruta como:
<Route path="/cuisine/*" element={<Cuisine />} /><List> a algún otro elemento, es decir, <div> . La lista no funciona con NavLink tal como está. Category.jsx:
function Category() { return ( <div> <NavLink to={"/cuisine/Italian"}> <FaPizzaSlice /> <h4>Italian</h4> </NavLink> <NavLink to={"/cuisine/American"}> <FaHamburger /> <h4>American</h4> </NavLink> <NavLink to={"/cuisine/Thai"}> <GiNoodles /> <h4>Thai</h4> </NavLink> <NavLink to={"/cuisine/Japanese"}> <GiChopsticks /> <h4>Japanese</h4> </NavLink> </div> ); }Está envolviendo los enlaces en Category en un NavLink y no ha pasado un requisito to prop.
const List = styled(NavLink)` display: flex; justify-content: center; margin: 2rem 0rem; `;...
function Category() { return ( <List> // <-- NavLink, missing to prop <NavLink to={'/cuisine/Italian'}> <FaPizzaSlice /> <h4>Italian</h4> </NavLink> <NavLink to={'/cuisine/American'}> <FaHamburger /> <h4>American</h4> </NavLink> <NavLink to={'/cuisine/Thai'}> <GiNoodles /> <h4>Thai</h4> </NavLink> <NavLink to={'/cuisine/Japanese'}> <GiChopsticks /> <h4>Japanese</h4> </NavLink> </List> ); }Enlace de navegación
interface LinkProps extends Omit< React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" > { replace?: boolean; state?: any; to: To; // <-- to prop is required reloadDocument?: boolean; }
Probablemente quieras que List sea algún otro elemento con estilo, como un div .
const List = styled.div` display: flex; justify-content: center; margin: 2rem 0rem; `;