如何在不渲染 React 中的某些组件的情况下走特定路线？答案

【问题标题】：How to go specific route without rendering some components in React?如何在不渲染 React 中的某些组件的情况下走特定路线？
【发布时间】：2022-01-02 11:19:02
【问题描述】：

我正在使用react-router-dom v6。我希望在没有Sidebar 和Topbar 组件的情况下呈现我的Login 页面。怎么做？

function App() {
  return (
    <Router>
      <Container>
        <Sidebar />
        <Content>
          <Topbar />
          <MainContent>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/users" element={<UserList />} />
              <Route path="/users/:id" element={<User />} />
              <Route path="/newUser" element={<NewUser />} />
              <Route path="/products" element={<ProductList />} />
              <Route path="/products/:id" element={<Product />} />
              <Route path="/newProduct" element={<NewProduct />} />
              <Route path="/login" element={<Login />} />
            </Routes>
          </MainContent>
        </Content>
      </Container>
    </Router>
  );
}

我不希望我的登录页面在 MainContent 内呈现，而是在没有 Sidebar 和 Topbar 的情况下占据整个页面。

我尝试将Routes 移到上方并在侧边栏上方登录route，但出现错误Error: [Sidebar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

【问题讨论】：

最好创建自己的自定义路由组件来处理布局组件和侧边栏/导航栏等内容的呈现。创建您自己的 Route 组件，该组件仅呈现包装 react-router 路由的容器内容，然后为他们在登录时可以看到的路由创建类似于 AuthRoute 的组件，该组件呈现容器内容以及侧边栏/导航栏/随便。然后你可以只拥有<Route path="/login" element={<Login />} /> Route 是你的自定义路由，<AuthRoute path="/users" element={<UserList />} /> 是你的自定义路由

标签： javascript reactjs routes react-router react-router-dom

【解决方案1】：

由于SideBar 和TopBar 似乎是“布局”的一部分，并且您想要专门针对“/ login”的不同“布局”，因此我建议将容器组件抽象为布局组件。每个布局容器都应该为它们各自的嵌套路由渲染一个Outlet。

const AppLayout = () => (
  <Container>
    <Sidebar />
    <Content>
      <Topbar />
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

const LoginLayout = () => (
  <Container>
    <Content>
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<AppLayout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<UserList />} />
          <Route path="users/:id" element={<User />} />
          <Route path="newUser" element={<NewUser />} />
          <Route path="products" element={<ProductList />} />
          <Route path="products/:id" element={<Product />} />
          <Route path="newProduct" element={<NewProduct />} />
        </Route>
        <Route path="/login" element={<LoginLayout />}>
          <Route index element={<Login />} />
        </Route>
      </Routes>
    </Router>
  );
}

【讨论】：