0
210
Vistasreaccionar router dom no funciona al cambiar la ruta
Estoy tratando de usar el enrutador para reaccionar, pero no obtengo nada al cambiar la ruta, puede verificar el código aquí Enlace ......................... .....
import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( <Layout> <Router> <Routes> <Route exact path="/" element={<Home />} /> <Route path="/About" element={<About />} /> </Routes> </Router> </Layout> ); } export default App; import React from "react"; import { BrowserRouter as Router, Link } from "react-router-dom"; function Layout({ children }) { return ( <div> <Router> <Link to="/">Home</Link> <Link to="/about">About</Link> </Router> <div>{children}</div> </div> ); } export default Layout;3 Respuestas
Responde la pregunta0
necesita eliminar el enrutador de su envoltura de ruta
importar React desde "react"; importar diseño desde "./Layout"; importar Inicio desde "./Inicio"; importar Acerca de desde "./Acerca de"; importar {BrowserRouter as Routes, Route} desde "react-router-dom";
función aplicación () { retorno (
<Routes> <Route exact path="/" element={<Home />} /> <Route path="/About" element={<About />} /> </Routes> ); }exportar la aplicación predeterminada;
0
Coloque <div>{children}</div> dentro de <Router> , luego en app.js elimine Router . Porque eso ya ha sido declarado en <Layout>
Diseño.js
import React from "react"; import { BrowserRouter as Router, Link } from "react-router-dom"; function Layout({ children }) { return ( <div> <Router> <Link to="/">Home</Link> <Link to="/about">About</Link> <div>{children}</div> </Router> </div> ); } export default Layout;Aplicación.js
import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( <Layout> <Routes> <Route exact path="/" element={<Home />} /> <Route path="/About" element={<About />} /> </Routes> </Layout> ); } export default App;Su código actual generará lo siguiente:
<div> <Router> <Link to="/">Home</Link> <Link to="/about">About</Link> </Router> {/* Children (App.js) */} <Router> <Routes> <Route exact path="/" element={<Home />} /> <Route path="/About" element={<About />} /> </Routes> </Router> {/* Children (App.js) */} </div> No necesita dos instancias de <Router> .
Así debería ser:
<Router> <Link to="/">Home</Link> <Link to="/about">About</Link> {/* Children (App.js) */} <Routes> <Route exact path="/" element={<Home />} /> <Route path="/About" element={<About />} /> </Routes> {/* Children (App.js) */} </Router>0
El problema es que tiene dos enrutadores diferentes en su aplicación.
Debe mover el componente de diseño dentro de su componente de enrutador en App.js 
Y luego elimine el segundo enrutador dentro de Layout.
Más información aquí: Error: useHref() solo se puede usar en el contexto de un componente <Router>. Funciona cuando pongo directamente la url como localhost:3000/experiencias