反应路由器 v6 :如何使用相同的路径在 div 内外渲染多个组件

Question

我正在尝试升级到react-router-domv6

：

v5

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

应用.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 之外，即使没有div，react router 也无法识别 as 路由中的组件，这意味着每个组件都应该有一个唯一的路径，我也尝试了两个具有相同路径的组件，如下所示：

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

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

它不起作用。我尝试了不同的代码，我搜索了很多都没有找到任何解决方案。

Answer 1

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

在react-router-domv6 中，您可以创建所谓的布局组件。布局组件可以呈现页眉和页脚、侧边栏、抽屉和常规内容布局元素，重要的是，它是要呈现的嵌套/包装Route组件的Outlet组件。

例：

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>

Answer 2

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

尝试创建一个组件布局，该布局应如下所示：

// 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;