React Router v6：如何使用相同路径在 div 内部和外部呈现多个组件

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>

这是我的 css 文件 App.js

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

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

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

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

Answer 1

我将分享我项目中的工作代码，希望这对您有所帮助。

尝试创建一个如下所示的组件布局：

// Layout.js
import React from "react";
import { NavBar } from "./SidebarNav";
export const Layout = ({ children }) => {
  return (
    <>
      <div className="block">
        <NavBar />
        <div className="w-full ">{children}</div>
      </div>
    </>
  );
};

然后以类似的方式创建路由：

// routes.js
import { Routes, Route } from "react-router-dom";
import { Layout } from "./layout/Layout";
import Home from "./pages/Home";
import { ItemList } from "./pages/ItemList";

const BaseRouter = () => (
  <>
    <Layout>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/item-list/" element={<ItemList />} />
      </Routes>
    </Layout>
  </>
);

export default BaseRouter;

将路由拆分到单独的文件中可为您提供更多自由，最重要的是使您的代码更易于访问。

// App.js
import { BrowserRouter as Router } from "react-router-dom";
import BaseRouter from "./routes";

function App() {
  return (
    <Router>
      <BaseRouter />
    </Router>
  );
}

export default App;

Answer 2

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

在 react-router-dom v6 中，您可以创建所谓的布局组件。布局组件可以呈现您的页眉和页脚、侧边栏、抽屉和一般内容布局元素，重要的是 Outlet nested/wrapped [=15= 的组件] 组件被渲染成。

示例：

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>

React Router v6：如何使用相同路径在 div 内部和外部呈现多个组件

React Router v6 : How to render multiple component inside and outside a div with the same path

javascript

css

reactjs

react-router-dom

v5

v6