0
168
Vistasreact-router-dom no funciona cuando cambia la ruta
Estoy tratando de renderizar el componente Inicio y Acerca de usando react-router pero no obtengo nada. Creo que el problema en el archivo de índice con la tienda. ¿Cómo puedo arreglarlo?
Aquí hay un codesandbox en ejecución.
índice.js
import React from "react"; import reactDom from "react-dom/client"; import App from "./App"; import Store from "./Store"; const root = reactDom.createRoot(document.getElementById("root")); root.render( <Store> <App /> </Store> );Tienda
import React, {createContext, useState} from 'react' import Layout from './Layout' export const Data = createContext() function Store({ children }) { const [state, setState] = useState(true) const value = {state, setState} return ( <Data.Provider value={value}> <Layout>{children}</Layout> </Data.Provider> ) } export default StoreDiseño
import React, { useContext } from "react"; import { Data } from "./Store"; import { BrowserRouter as Router, Route, NavLink, Routes, Link, } from "react-router-dom"; function Layout({ children }) { const { state } = useContext(Data); return ( <div className="layout"> <Router> <div> <Link to="/">Home</Link> <Link to="/about">About</Link> </div> <div className={`${state ? "hide" : "show"} mobil `}> <div className="children">{children} </div> </div> </Router> </div> ); } export default Layout;aplicación
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;3 Respuestas
Responde la pregunta0
Acabo de ver su archivo Layout.js .
function Layout({ children }) { return ( <div> <!-- Router --> <Link to="/">Home</Link> <Link to="/about">About</Link> <div>{children}</div> <!-- /Router --> </div> ); } No puede usar <Router> porque el Layout se usa de forma recursiva e implícitamente está anidando el elemento <Router> . Es mejor usar el elemento solo una vez en su aplicación antes de que se cargue.
0
El componente de la tienda debe recibir los accesorios secundarios y pasarlos al diseño, por ejemplo:
function Store({children}) { const [state, setState] = useState(true) const value = {state, setState} return ( <Data.Provider value={value}> <Layout>{children}</Layout> </Data.Provider> ) }0
Tema
El código que ha compartido representa un componente de Layout dentro de otro componente de Layout . El componente de Layout está representando un Router . Es una violación invariable representar un enrutador dentro de otro enrutador.
function Layout({ children }) { const { state } = useContext(Data); return ( <div className="layout"> <Router> // <-- nested router!! <div> <Link to="/">Home</Link> <Link to="/about">About</Link>{" "} </div> <div className={`${state ? "hide" : "show"} mobil `}> <div className="children">{children} </div> </div> </Router> </div> ); } Tanto los componentes de la Store como de la App representan un componente de Layout y la Store representa directamente la App .
Solución
Elimine uno u otro componente de Layout de la Store o la App . Sugiero eliminarlo de Store para que Store solo proporcione el valor de contexto y no se mezcle con otros problemas de diseño de interfaz de usuario y contexto de enrutamiento. La Store debe hacer que el Provider y los children sean prop.
Ejemplo:
function Store({ children }) { const [state, setState] = useState(true); const value = { state, setState }; return ( <Data.Provider value={value}> {children} </Data.Provider> ); } 