Estoy tratando de crear una aplicación de una sola página con ruta, pero no funciona. Solo funciona cuando escribo la URL manualmente, pero si hago clic, no se redirige a la página.
estoy usando un sidemenu.js para representar la lista y en app.js para representar el contenido.
Aquí está:
app.js function App() { return ( <div className="App"> <HashRouter> <BrowserRouter> <Switch> <Route exact path="/Home"> <Home /> </Route> <Route exact path="/Consultas"> <Consultas /> </Route> <Route path="/diagnosticos" exact component={<Diagnosticos/>}/> <Route path="/Noticias" component={Noticias}/> <Route path="/Configs" component={Configuracoes}/> </Switch> </BrowserRouter> </HashRouter> </div> ); } export default App; sidemenu.js function SideMenu() { return ( <HashRouter> <div id="sideMenu"> <img src={require('./HwBC.png')} alt="" /> <hr /> <h1>menu</h1> <BrowserRouter> <ul> <li><NavLink to="/">Home</NavLink></li> <li><NavLink exact to="/consultas">Consultas</NavLink></li> <li><NavLink to="/diagnosticos">Diagnostiocos</NavLink></li> <li><NavLink to="/noticias">Noticias</NavLink></li> <li><NavLink to="/configs">Configuracoes</NavLink></li> </ul> </BrowserRouter> </div> </HashRouter> ) }; export default SideMenu;Y ya tengo otras soluciones en alguna publicación y aún no ha funcionado.
Está representando las rutas y los enlaces a ellas en dos contextos de enrutamiento separados. Solo se necesita un único contexto de enrutamiento para toda la aplicación React.
Además, es probable que no necesite tanto un HashRouter como un BrowserRouter . Elija el que se adapte a las necesidades de su aplicación.
Representar todas las rutas y enlaces en un solo contexto de enrutamiento. Levante el HashRouter / BrowserRouter hasta el ReactTree de modo que solo un único enrutador envuelva tanto la App que representa las rutas como los componentes del SideMenu .
Ejemplo:
índice.js
<BrowserRouter> <SideMenu /> <App /> </BrowserRouter>aplicación
function App() { return ( <div className="App"> <Switch> <Route path="/Consultas"> <Consultas /> </Route> <Route path="/diagnosticos" component={Diagnosticos} /> <Route path="/Noticias" component={Noticias} /> <Route path="/Configs" component={Configuracoes}/ > <Route path="/"> <Home /> </Route> </Switch> </div> ); } export default App;Menú lateral
function SideMenu() { return ( <div id="sideMenu"> <img src={require('./HwBC.png')} alt="" /> <hr /> <h1>menu</h1> <ul> <li><NavLink exact to="/">Home</NavLink></li> <li><NavLink to="/consultas">Consultas</NavLink></li> <li><NavLink to="/diagnosticos">Diagnostiocos</NavLink></li> <li><NavLink to="/noticias">Noticias</NavLink></li> <li><NavLink to="/configs">Configuracoes</NavLink></li> </ul> </div> ) }; export default SideMenu;