Detect the url (on reactjs) to hide an element on the page-CodePudding

On a project I just started on reactjs, I should hide an element when the url changes. I searched and did not find something useful.

I would like to hide the Sidebar when the url is not Search. Thanks to anyone who wants to give me a hand.

import React from 'react';
import { Routes, Route } from "react-router-dom";

import 'bootstrap/dist/css/bootstrap.css';
import 'react-bootstrap';
import './App.css';

import NavBarTop from './components/layouts/header/NavBar_top';
import Sidebar from './components/layouts/Sidebar';

import Home from './components/pages/Home';
import Login from './components/pages/Login';
import Register from './components/pages/Register';
import Search from './components/pages/Search';
import E404 from './components/pages/E404';

function App() {
    return (
        <>
            <div>
                <NavBarTop />
                <div className="container-fluid maincon">
                    <Sidebar />
                    <Routes>
                        <Route path="/" exact element={<Home />} />
                        <Route path="/login" element={<Login />} />
                        <Route path="/register" element={<Register />} />
                        <Route path="/search" element={<Search />} />
                        <Route path="*" element={<E404 />} />
                    </Routes>
                </div>
            </div>
        </>
    );
}

export default App;

CodePudding user response：

I would like to hide the Sidebar when the url is not Search.

Just render the Sidebar only with the Search component instead of unconditionally with everything.

<div>
  <NavBarTop />
  <div className="container-fluid maincon">
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route
        path="/search"
        element={(
          <>
            <Sidebar />
            <Search />
          </>
        )}
      />
      <Route path="*" element={<E404 />} />
    </Routes>
  </div>
</div>

If you wanted to render Sidebar with several routes, then create a layout component. Nested/wrapped Route components are rendered into the Outlet component.

import { Outlet } from 'react-router-dom';

const SidebarLayout = () => (
  <>
    <Sidebar />
    <Outlet />
  </>
);

...

<div>
  <NavBarTop />
  <div className="container-fluid maincon">
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route element={SidebarLayout}>
        <Route path="/search" element={<Search />} />
        ... other routes to render with sidebar ...
      </Route>
      <Route path="*" element={<E404 />} />
    </Routes>
  </div>
</div>

CodePudding user response：

you can use hook named as useSearchParam

const [searchParams, setSearchParams] = useSearchParams();

to get query/url params as string.

CodePudding user response：

there are multiple ways to do that.. this is only one...

export default function Wrapper() {
    const urlWindow = window.location;
    console.log(urlWindow.pathname.split("/")[1]);
    const acceptedPaths = ["login", "register", "search", "test"];
    return (
        <>
            <div>
                navbar
                <div className="container-fluid">
                    <div className="row">
                        {acceptedPaths.includes(urlWindow.pathname.split("/")[1]) ? (
                            <>
                                <Sidebar />
                                <MainContent />
                            </>
                        ) : "Show 404 page"}
                    </div>
                </div>
            </div>
        </>
    );
}

const Sidebar = () => {
    return <div className="col-md-2">I'm sidebar</div>;
};

const MainContent = () => {
    return <div className="col-md-10">I'm main content</div>;
};

CodePudding user response：

Firstly, you need import useLocation in react-router-dom

import { Routes, Route, useLocation } from "react-router-dom";

and call it in App function to get the current URL path which is used to check against /search for hiding/showing SideBar

function App() {
    const location = useLocation();
    const currentPath = location.pathname
    return (
        <>
            <div>
                <NavBarTop />
                <div className="container-fluid maincon">
                    {currentPath === '/search' && <Sidebar />}
                    <Routes>
                        <Route path="/" exact element={<Home />} />
                        <Route path="/login" element={<Login />} />
                        <Route path="/register" element={<Register />} />
                        <Route path="/search" element={<Search />} />
                        <Route path="*" element={<E404 />} />
                    </Routes>
                </div>
            </div>
        </>
    );
}

CodePudding user response：

Thanks for the answers. Thanks to you I am able to better understand how to display certain elements on a certain page. It is difficult for me to choose the answer that helped me. All the answers were useful because I saw several very interesting approaches.