javascript React Router Dom，仅显示某些页面的Header组件[重复]

cedebl8k 于 2023-04-10 发布在 Java

关注(0)|答案(1)|浏览(127)

此问题已在此处有答案：

How do I render components with different layouts/elements using react-router-dom v6（2个答案）
9个月前关闭。
Header会出现在除ConfirmEmail之外的所有组件中。基本上，我不希望在打开ConfirmEmail组件时出现Header。我该怎么办？
路由器设置：

import React from 'react';
import {BrowserRouter,Routes ,Route} from 'react-router-dom'
import Header from "../Components/Header";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import Home from '../Components/Home';
import Contact from '../Components/Contact';
import Login from '../Components/Login';
import Register from '../Components/Register';
import ConfirmEmail from '../Components/SuccessEmailApproved';

const App = () =>{
  return(
    <BrowserRouter>
      <Header/>// If confirmEmail component is opened, hide it here
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/home" element={<Home/>} />
        <Route path="/ev" element={<Home/>} />
        <Route path="/contact" element={<Contact/>} />
        <Route path="/iletisim" element={<Contact/>} />
        <Route path="/login" element={<Login/>} />
        <Route path="/giris" element={<Login/>} />
        <Route path="/register" element={<Register/>} />
        <Route path="/kayit" element={<Register/>} />
        <Route path="/ConfirmEmail" element={<ConfirmEmail />} /> //I don't want the header component to appear if this is opened. but it will appear in other components.
      </Routes>
    </BrowserRouter>
  );
}

export default App;

更新：

尝试了下面的解决方案，它的工作，但有没有更好的方法？

{window.location.pathname !== "/ConfirmEmail" ?<Header/>:<></>}

JavaScript

来源：https://stackoverflow.com/questions/72868147/react-router-dom-show-header-component-only-for-some-pages

1条答案

按热度按时间

owfi6suc1#

你可以像下面这样创建一个Layout.js组件。这是在React Router Dom v6中为多个页面设置相同结构的常见方法。

import { Outlet } from "react-router-dom";
import Header from "../Header"; // ⚠️ verify it's the correct path

const Layout = () => {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
};

export default Layout;

然后按如下所示更改App。请注意，ConfirmEmail页面从需要Header的页面中删除：

// ⚠️  previous imports
import Layout from "./components/Layout"; // ⚠️ verify it's the correct path

const App = () =>{
  return(
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home/>} />
          <Route path="/home" element={<Home/>} />
          <Route path="/ev" element={<Home/>} />
          <Route path="/contact" element={<Contact/>} />
          <Route path="/iletisim" element={<Contact/>} />
          <Route path="/login" element={<Login/>} />
          <Route path="/giris" element={<Login/>} />
          <Route path="/register" element={<Register/>} />
          <Route path="/kayit" element={<Register/>} />
        </Route>
        <Route path="/ConfirmEmail" element={<ConfirmEmail />} /> 
      </Routes>
    </BrowserRouter>
  );
}

export default App;

你可以有任意多的布局（MainLayout，AuthLayout，Layout ...）。设置是一样的，一个Outlet和一个Route，它将你的Layout作为element，并 Package 该Layout的页面。

赞(0）回复(0）举报 2023-04-10

我来回答

javascript React Router Dom，仅显示某些页面的Header组件[重复]

更新：

1条答案

相关问题

热门标签

最新问答