检测url(在reactjs上)以隐藏页面上的元素 [英] Detect the url (on reactjs) to hide an element on the page

问题描述

在我刚刚开始的一个项目中，当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;

推荐答案

我想在URL未搜索时隐藏边栏。

仅使用组件呈现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>

这篇关于检测url(在reactjs上)以隐藏页面上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！