Soy nuevo en React y no puedo hacer que mis rutas funcionen. Estoy siguiendo el tutorial en la documentación pero de alguna manera no funciona. El contenido dentro del componente de la aplicación no aparece, así que asumo que hay algún tipo de problema con BrowserRouter o Routes o mi anidamiento, pero realmente no puedo entender qué está pasando.
index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from './App'; import Products from './routes/products'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route path="products" element={<Products />} /> </Route> </Routes> </BrowserRouter> </React.StrictMode> ); routes/app.js import { Outlet, Link } from "react-router-dom"; export default function App() { return ( <div> <h1>Hello World</h1> <nav> <Link to="/products">Products</Link> </nav> <Outlet /> </div> ); } routes/products.jsx export default function Products(){ return ( <div> <h1>Products</h1> </div> ); }PD: ya vi algunas respuestas de stackoverflow, pero aún así no pude ver en qué me estoy equivocando.
EDITAR: Gracias por la atención y el apoyo, pero después de reescribir el código y jugar con él, descubrí que el componente de mi aplicación no se procesa cuando agrego el componente Link to="" . ¿Alguna idea de por qué sucede esto?
Pruebe esta estructura de enrutador:
<BrowserRouter> <Routes> <Route index element={<App />}/> <Route path="products" element={<Products/>}/> </Routes> </BrowserRouter>Solo hice un cambio en su código, es decir, uso un wildcard para redirigir al usuario a la aplicación para cada ruta que no coincide con las otras rutas (es decir, cada ruta que no coincide con /products ). Puede agregar un comodín con * como este: <Route path="*" element={<App />} />
index.tsx
import { StrictMode } from "react"; import * as ReactDOMClient from "react-dom/client"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Products } from "./Products"; import App from "./App"; const rootElement = document.getElementById("root"); const root = ReactDOMClient.createRoot(rootElement); root.render( <StrictMode> <BrowserRouter> <Routes> <Route path="*" element={<App />} /> <Route path="products" element={<Products />} /> </Routes> </BrowserRouter> </StrictMode> ); App.tsx
import "./styles.css"; import { Link } from "react-router-dom"; export default function App() { return ( <> <Link to="/home">HOME</Link> <Link to="/products">PRODUCTS</Link> <div>HOME PAGE HERE</div> </> ); } Products.tsx
import { Link } from "react-router-dom"; export const Products = () => { return ( <> <Link to="/home">HOME</Link> <Link to="/products">PRODUCTS</Link> <div>PRODUCTS PAGE HERE</div> </> ); };Puede consultar el ejemplo en codesandbox . Haga clic en los enlaces para navegar entre las páginas.
Estoy aquí respondiendo mi propia pregunta. Después de 2 días de locura, descubrí que tenía dos archivos package.json, así que simplemente reinstalé localmente el enrutador de reacción y finalmente funcionó. Llegué a esta conclusión gracias a otra respuesta aquí en StackOverflow.