reactjs - 如何不在登陆(登录页面)页面上呈现标题，但总是在 react-router v6 中的所有其他页面上呈现标题？

Question

我正在尝试创建一个没有标题的登陆页面(登录)的网站，但是一旦用户登录，所有后续页面都会有标题。我尝试了以下但语法不正确，因此不起作用。请问有人可以建议吗？

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from '..path for landing';
import component1 from '..path for component1';
import component2 from '..path for component2';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Login />} />
        
        <Header />
        
        <Route path="/component1" element={<component1 />} />
        <Route path="/component2" element={<component2 />} />
      </Routes>
    </Router>
  );
}

Answer 1

创建一个布局组件，用于呈现 Header 组件和一个 Outlet 组件，用于呈现嵌套路由。

例子:

import { Outlet } from 'react-router-dom';

const AuthLayout = () => {
  // ... perhaps some authentication logic to protect routes?
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
};

...

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route element={<AuthLayout />}>
          <Route path="/component1" element={<component1 />} />
          <Route path="/component2" element={<component2 />} />
        </Route>
      </Routes>
    </Router>
  );
}