Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

264
Visualizações
React Router Dom, render a component only for some routes

I have a React application with React Router Dom v6 and trying to render the Nav component when the path does NOT match the root "/" but I'm having trouble getting it to work. This is my code:

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;

How should I fix this?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Quick Solution:

You could simply do like below, adding the Nav where you want. I'm not sure if you can know the path in App, since it's not wrapped inside the 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;

Improvement:

And if you want to take it further, instead of doing like above, you could set up a Layout component, like this:

import { Outlet } from "react-router-dom";
import Nav from "../Nav/Nav";

const Layout () => {
  return (
    <>
      <Nav />
      <Outlet />
    </>
  );
};

export default Layout;

And render the routes where you want the Nav trough the 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;
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda