Tengo un problema cuando hago la barra de navegación usando raect, pero cuando coloco el componente <Route> que deja la vista web en blanco, pero si elimino <Route> ¿Alguien puede ayudarme a solucionar mi problema?
este es mi código en App.js
import './App.css'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom' function App() { return ( <Router> <div> <nav className="navbar navbar-expand-lg navbar-light bg-light"> <Link className="navbar-brand" to="/">Logo</Link> <div className="navbar-nav"> <Link className="nav-item nav-link" to="/">Home</Link> <Link className="nav-item nav-link" to="/premium">About Me</Link> </div> </nav> </div> <Route path="/" component={() => <h4>Home</h4>}></Route> <Route path="/premium" component={() => <h4>About Me</h4>}></Route> </Router> ); } export default App;La ruta debe ser hijo directo de Rutas
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom' <Router> <div> <nav className="navbar navbar-expand-lg navbar-light bg-light"> <Link className="navbar-brand" to="/">Logo</Link> <div className="navbar-nav"> <Link className="nav-item nav-link" to="/">Home</Link> <Link className="nav-item nav-link" to="/premium">About Me</Link> </div> </nav> </div> <Routes> <Route path="/" element={() => <h4>Home</h4>}></Route> <Route path="/premium" element={() => <h4>About Me</h4>}></Route> </Routes> </Router>Según los comentarios de OP sobre las rutas que funcionan, pero el contenido enrutado no se muestra, asumiré que react-router-dom@6 está instalado y funcionando. La API del componente Route cambió bastante desde v5. Los componentes Route solo pueden ser representados por el componente de Routes ( el sucesor espiritual del componente Switch de RRDv5 ) o por otro componente de Route en el caso de rutas anidadas. Atrás quedaron los accesorios de función de component , render e children , reemplazados por un accesorio de un solo element que toma un ReactNode , también conocido como JSX.
Route en un componente de Routeselement del componente de RouteEjemplo:
import './App.css'; import { BrowserRouter as Router, Routes, // <-- import Routes component Route, Link } from 'react-router-dom'; function App() { return ( <Router> <div> <nav className="navbar navbar-expand-lg navbar-light bg-light"> <Link className="navbar-brand" to="/">Logo</Link> <div className="navbar-nav"> <Link className="nav-item nav-link" to="/">Home</Link> <Link className="nav-item nav-link" to="/premium">About Me</Link> </div> </nav> </div> <Routes> // <-- wrap routes in `Routes` component <Route path="/" element={<h4>Home</h4>} // <-- JSX on element prop /> <Route path="/premium" element={<h4>About Me</h4>} // <-- JSX on element prop /> </Routes> </Router> ); } export default App;Para hacer una barra de navegación, no necesita los componentes BrowserRouter o Route, solo el enlace de react-router-dom
como se muestra en la guía de inicio rápido: reactrouter.com/QuickStart#Navigation
function Home() { return ( <div> <h1>Home</h1> <nav> <Link to="/">Home</Link> |{" "} <Link to="about">About</Link> </nav> </div> ); }Además, la barra de navegación debe colocarse como un atributo de elemento de una ruta siguiendo este enfoque:
<BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route index element={<Home />} /> <Route path="teams" element={<Teams />}> <Route path=":teamId" element={<Team />} /> <Route path="new" element={<NewTeamForm />} /> <Route index element={<LeagueStandings />} /> </Route> </Route> </Routes> </BrowserRouter>