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

當 url 不是搜索時，我想隱藏邊欄。

只需使用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 ，那么創建一個布局組件。 嵌套/包裝的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 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

首先，你需要在react-router-dom中導入useLocation

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

並在App function 中調用它以獲取當前 URL 路徑，該路徑用於檢查/search隱藏/顯示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 4

您可以使用名為 useSearchParam 的鈎子

const [searchParams, setSearchParams] = useSearchParams();

將查詢/url 參數作為字符串獲取。