检测 url （在 reactjs 上）以隐藏页面上的元素

Question

在我刚开始使用 reactjs 的项目中，我应该在 url 更改时隐藏一个元素。我搜索了一下，没有找到有用的东西。

我想在 url 不是搜索时隐藏边栏。感谢任何愿意帮助我的人。

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

您可以使用名为 useSearchParam 的钩子

const [searchParams, setSearchParams] = useSearchParams();

获取 query/url 参数作为字符串。

Answer 2

有多种方法可以做到这一点..这只是一种...

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 3

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

仅使用 Search 组件而不是无条件地使用所有内容渲染 Sidebar 。

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

如果您想使用多个路由呈现 Sidebar，请创建一个布局组件。 Nested/wrapped Route 个组件渲染到 Outlet 个组件中。

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>

Answer 4

首先，您需要在 react-router-dom

中导入 useLocation

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

并在 App 函数中调用它以获取当前 URL 路径，该路径用于检查 /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>
        </>
    );
}

检测 url （在 reactjs 上）以隐藏页面上的元素

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

javascript

reactjs

react-router

react-router-dom