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

Question

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;

Answer 1

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>;
};

Answer 2

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>
        </>
    );
}

Answer 3

you can use hook named as useSearchParam

const [searchParams, setSearchParams] = useSearchParams();

to get query/url params as string.