检测url(在reactjs上)以隐藏页面上的元素

发布时间：2023/10/11

本文介绍了检测url(在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;

推荐答案

我想在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上)以隐藏页面上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

检测url(在reactjs上)以隐藏页面上的元素

问题描述

推荐答案

相关文章

前端问题最新文章

热门教程