javascript - react 路由器 v6 : How to render multiple component inside and outside a div with the same path

Question

我正在尝试升级到react-router-dom v6:

v5

在版本 5 中，它就像一个魅力:

App.js

import Sidebar from "./components/sidebar/Sidebar";
import Topbar from "./components/topbar/Topbar";
import "./app.css";
import Home from "./pages/home/Home";
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import UserList from "./pages/userList/UserList";
import User from "./pages/user/User";
import NewUser from "./pages/newUser/NewUser";
import ProductList from "./pages/productList/ProductList";
import Product from "./pages/product/Product";
import NewProduct from "./pages/newProduct/NewProduct";
import Login from "./pages/login/Login";



function App() {

   const admin = JSON.parse(JSON.parse(localStorage.getItem("persist:root"))?.user || "{}")?.currentUser?.isAdmin ;

  return (
    <Router>
    <Switch>
      <Route path="/login">
        <Login />
      </Route>
      {admin && (
        <>
          <Topbar />
          <div className="container">
            <Sidebar />
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/users">
              <UserList />
            </Route>
            <Route path="/user/:userId">
              <User />
            </Route>
            <Route path="/newUser">
              <NewUser />
            </Route>
            <Route path="/products">
              <ProductList />
            </Route>
            <Route path="/product/:productId">
              <Product />
            </Route>
            <Route path="/newproduct">
              <NewProduct />
            </Route>
          </div>
        </>
      )}
    </Switch>
  </Router>
  );
}

export default App;

v6

升级到 v6 后，我将代码更改为如下所示:

<Routes>
  <Route path="/login" element={<Login />} />
  {admin && (
    <>
      <Route path="/" element={<Topbar />}/>
      <Route path="/" element={
        <>
          <div className="container">
            <Route index element={<Sidebar/>}/>
            <Route index element={<Home/>}/>
            <Route path="/users" element={<UserList />} />
            <Route path="/user/:userId" element={<User />} />
            <Route path="/newUser" element={<NewUser />} />
            <Route path="/productList" element={<ProductList />} />
            <Route path="/product/:productId" element={<Product />} /> 
            <Route path="/newProduct" element={<NewProduct />} />
          </div>
        </> 
      }
    </>
  )}
</Routes>

这是我的 App.js 的 css 文件

通知:Topbar组件应该在 div 之外，即使没有 div，react router 也无法识别 as 路由内的组件，这意味着每个组件应该有一个唯一的路径，我也尝试了两个具有相同路径的组件，如下所示:

<Route path="/" element = {<><Home/><Sidebar/><>} ，但是css没有生效

.container {
  display: flex;
  margin-top: 50px;
}

这不起作用。我尝试了不同的代码，并且进行了很多搜索，但没有找到任何解决方案。

Answer 1

问题的一部分是您正在渲染多个相同的路径，即两个 "/"路径和两个嵌套索引路径。这行不通。

在 react-router-dom v6 您可以创建所谓的布局组件。布局组件可以渲染页眉和页脚、侧边栏、抽屉和一般内容布局元素，更重要的是 Outlet嵌套/包裹的组件 Route要渲染到的组件。

示例:

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

const AppLayout = ({ admin }) => admin ? (
  <>
    <Topbar />
    <div className="container">
      <Sidebar />
      <Outlet />
    </div>
  </>
) : null;

将布局组件渲染为Route将要渲染的路由包装到特定布局中。

<Routes>
  <Route path="/login" element={<Login/>} />
  <Route element={<AppLayout admin={admin} />}>
    <Route index element={<Home />} />
    <Route path="/users" element={<UserList />} />
    <Route path="/user/:userId" element={<User />} />
    <Route path="/newUser" element={<NewUser />} />
    <Route path="/productList" element={<ProductList />} />
    <Route path="/product/:productId" element={<Product />} />
    <Route path="/newProduct" element={<NewProduct />} />
  </Route>
</Routes>