Tengo una aplicación React con React Router Dom v6 e intento renderizar el componente Nav cuando la ruta NO coincide con la raíz "/" , pero tengo problemas para que funcione. Este es mi código:
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom"; import Nav from "./components/Nav/Nav"; import Home from "./components/Home/Home"; import Contributors from "./components/Contributors/Contributors"; const App = () => { const match = matchPath({ path: "/", end: true }, "/"); return ( <Router> {!match ? <Nav /> : null} <Routes> <Route path="/" exact element={<Home />} /> <Route path="/contributors" element={<Contributors />} /> </Routes> </Router> ); } export default App;¿Cómo debo arreglar esto?
Simplemente puede hacer lo siguiente, agregando el Nav donde desee. No estoy seguro de si puede conocer la ruta en la App , ya que no está envuelta dentro del Router .
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom"; import Nav from "./components/Nav/Nav"; import Home from "./components/Home/Home"; import Contributors from "./components/Contributors/Contributors"; const App = () => { return ( <Router> <Routes> <Route path="/" exact element={<Home />} /> <Route path="/contributors" element={<><Nav /><Contributors /></>} /> </Routes> </Router> ); } export default App; Y si desea ir más allá, en lugar de hacer lo anterior, puede configurar un componente de Layout , como este:
import { Outlet } from "react-router-dom"; import Nav from "../Nav/Nav"; const Layout () => { return ( <> <Nav /> <Outlet /> </> ); }; export default Layout; Y represente las rutas en las que desea la Nav a través del Layout :
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom"; import Home from "./components/Home/Home"; import Contributors from "./components/Contributors/Contributors"; import Layout from "./components/Layout/Layout"; const App = () => { return ( <Router> <Routes> <Route path="/" exact element={<Home />} /> <Route element={<Layout />}> <Route path="/contributors" element={<Contributors />} /> </Route> </Routes> </Router> ); } export default App;