Construí un sitio web para reaccionar con Browserrouting y tengo el siguiente código y problema
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter> <Routes> <Route path="/" element={<App/>}> <Route path="/home" element={<Homepage />} />El problema que tengo es que cuando ejecuto la aplicación, abre la "Aplicación" y no la página de inicio real. Intenté solucionarlo cambiando la aplicación a la página de inicio, pero no funciona. Según tengo entendido, / debe estar allí para que la aplicación se muestre en cualquier otra ruta y funcione.
¿Puede alguien explicarme cómo puedo hacer que la ruta/siga siendo la página de inicio sin tener que escribir/inicio para llegar allí?
Gracias !
Parece que está representando la página de Homepage en una ruta anidada que está representando la App . En esta configuración, <Route path="/" element={<App />}> es lo que se denomina una ruta de diseño . La App se renderizará cuando la ruta sea exactamente "/" y debería renderizar un componente Outlet para que las rutas anidadas rendericen su contenido.
Un problema que veo aquí, y debería haber visto un error invariable react-router-dom con respecto a anidar una ruta absoluta dentro de una representación de ruta en una ruta absoluta. En otras palabras, "/home" es una ruta absoluta y no se puede anidar bajo la ruta absoluta "/" ; no es accesible.
Si la App es realmente una ruta de diseño y siempre desea que se represente, puede eliminar la path de acceso de la App de representación de la ruta principal y mover la página de Homepage a "/" .
<BrowserRouter> <Routes> <Route element={<App />}> <Route path="/" element={<Homepage />} /> </Route> </Routes> </BowserRouter> o convierta la página de Homepage en una ruta index y deje la ruta "/" en la ruta de diseño principal para que el enrutamiento relativo aún pueda funcionar correctamente y la página de Homepage se represente en "/" .
<BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route index element={<Homepage />} /> </Route> </Routes> </BowserRouter> Debo señalar que esta es una configuración ligeramente anormal. Por lo general, el componente de la App representaría las Routes y los componentes de Route en lugar de un punto de Outlet y se supone que todo se representará en "/" de forma predeterminada. El componente de la Homepage de inicio se representaría en path="/" .
Ejemplo:
<BrowserRouter> <App /> </BowserRouter>...
const App = () => { .... app logic .... return ( <Routes> <Route path="/" element={<Homepage />} /> </Routes> ); }; Existe OFC, la posibilidad aquí de que no tenía la intención de anidar estas rutas y desea que coincidan y se representen de forma independiente. En este caso, la solución es simplemente anular la ruta de la Homepage de inicio y continuar usando rutas absolutas para las rutas raíz.
Ejemplo:
<BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/home" element={<Homepage />} /> </Routes> </BowserRouter>encontré el problema
tuve que
<Route path="" element={<App/>}> <Route path="/" element={<Homepage />} />Elimine la ruta / en la aplicación y solo agregue la ruta / en la página de inicio.
Ahora funciona