Как исключить компонент с конкретной страницы?

Question

Новичок в React JS. Не понимаю, как сделать так, чтобы на одной конкретной странице (Error) не отображался Navbar.

import Navbar from "./components/navbar/Navbar";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";
import Characters from "./pages/Characters";
import Error from "./pages/Error";

import "./styles/main.css";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Characters" element={<Characters />} />
          <Route path="/Error" element={<Error />} />

        </Routes>


      </Router>
    </div>
  );
}

export default App;

Пробовала использовать Fragment по совету(https://stackoverflow.com/questions/53780075/excluding-header-component-on-a-specific-page-with-react-router) по такому же вопросу, но не вышло.

Answer 1

Можно использовать хук useLocation и условный рендеринг

import { useLocation } from "react-router-dom";

function App() {
  const currentUrl = useLocation();
  return (
    <div className="App">
      <Router>
        {currentUrl.pathname !== '/Error' && <Navbar />}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Characters" element={<Characters />} />
          <Route path="/Error" element={<Error />} />

        </Routes>


      </Router>
    </div>
  );
}

БЛОГ НА HUSL

Как исключить компонент с конкретной страницы?

Ответы (1 шт):