如果我已将所有组件嵌套在 Router 中，如何放置 <Login> 组件

Question

我不知道在哪里登录，所以：

第一个默认端点是 profile
第二个端点是message
端点上的完整页面视图 /login

    <div className="App">
      <Router>
        <NavBar />
        <Routes>
          <Route path="/message" element={ <Message /> } />
          <Route path="/" exact element={ <Profile /> } />
        </Routes>
      </Router>
    </div>

.App{
    max-width: 1000px;
    height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .5fr 2fr;
}

是否有适当的方法来管理或放置组件？

设计：

在其中一种解决方案之后，某些组件多次渲染 :(

    <div className="App">
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />

          <Route element={<NavBarLayout />}>
            <Route path="/message" element={<Message />} />
            <Route path="/" element={<Profile />} />
          </Route>
        </Routes>
      </Router>
    </div>

codesandbox.io link project code

Answer 1

你可以进行条件渲染

if(!authenticated) {
        return(
            <LoginPage loginHandler={loginHandler} />
        )
    } else {
        return(
            <Router>
               <Navbar />
               ....
        )

Answer 2

好的，我明白你的要求了...你想为登录页面呈现一个路由，不包括 NavBar 组件。为此，您使用所谓的 Layout Routes。创建一个布局包装器，其中包含 NavBar 和一个 Outlet 组件，用于渲染嵌套路由。

示例：

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

const NavbarLayout = () => (
  <div className="Navbar">
    <NavBar />
    <Outlet />
  </div>
);

...

.App {
  max-width: 1000px;
  height: 100vh;
  margin: 0 auto;
}

.Navbar {
  display: grid;
  grid-template-columns: .5fr 2fr;
}

...

<div className="App">
  <Router>
    <Routes>
      <Route path="/login" element={<Login />} />

      {/* 2-column layout with navbar */}
      <Route element={<NavbarLayout />}>
        <Route path="/message" element={<Message />} />
        <Route path="/" element={<Profile />} />
      </Route>
    </Routes>
  </Router>
</div>

如果我已将所有组件嵌套在 Router 中，如何放置 <Login> 组件

How to place <Login> component if I have nested all component inside Router

css

reactjs

layout

react-router-dom

outlet