Estoy tratando de crear un sitio web en reaccionar y estoy usando router-dom para mostrar la URL correcta.
Tengo una barra de navegación que se vincula a una página acerca de usando Link to="" y luego usando Switch y Route para mostrar el componente para la ruta correcta, pero no funciona.
No estoy seguro si me perdí algo aquí, pero no puedo mostrar ningún componente.
Este es mi PageContainer
import React from "react"; import { Route, Switch } from "react-router-dom"; import Alphabet from "./Alphabet"; import About from "./About"; export default class PageContainer extends React.Component { render() { return ( <section className="pagecontainer"> <Switch> <Route exact path="/omoss"> <About /> </Route> <Route exact path="/"> <Alphabet /> </Route> </Switch> </section> ); } }Esta es mi barra de navegación
import React from "react"; import { Link } from "react-router-dom"; export default class Navbar extends React.Component { render() { return ( <section> <section className="navbar"> <Link to="/">Hem</Link> <Link to="/omoss">OM OSS</Link> </section> </section> ); } }ACTUALIZAR:
BrowserRouter de los dos componentes anteriores.Aplicación.js
import React from "react"; import "./App.css"; import { BrowserRouter } from "react-router-dom"; import Navbar from "./components/Navbar"; import PageContainer from "./components/PageContainer"; function App() { return ( <BrowserRouter> <section className="App"> <Navbar /> <PageContainer /> </section> </BrowserRouter> ); } export default App;Aunque todavía no funciona. La URL cambia pero los componentes no se muestran.
ACTUALIZAR 2
Creo que lo resolví cuando eliminé otros dos componentes que aparecían en Switch dentro PageContainer pero no estaban en Route . Los eliminé antes de subirlos aquí pero los olvidé en mi código
Tiene dos componentes <BrowserRouter /> individuales, cada uno con su propio estado. Le sugiero que mueva el <BrowserRouter /> a un ancestro común de <Navbar /> y <PageContainer /> para que puedan compartir el mismo objeto de historial.
Por ejemplo, elimine el BrowserRouter de sus componentes y colóquelo más alto en la jerarquía de componentes. Ahora, tanto <Navbar /> como <PageContainer /> están en el ámbito del mismo <BrowserRouter />
function App() { return ( <BrowserRouter> <Navbar /> <PageContainer /> </BrowserRouter> ); }Intente agregar BrowserRouter en App.js
import React from "react"; import "./App.css"; import { BrowserRouter } from "react-router-dom"; import Navbar from "./components/Navbar"; import PageContainer from "./components/PageContainer"; function App() { return ( <BrowserRouter> <section className="App"> <PageContainer /> <Navbar /> </section> </BrowserRouter> ); } export default App;