react js中如何处理不同路由的组件答案

【问题标题】：How to handle components with different routes in react jsreact js中如何处理不同路由的组件
【发布时间】：2021-12-29 13:08:52
【问题描述】：

我已经构建了一个包含 3pages Page1、Page2、Page3 的 react 应用程序，并具有导航栏和侧边栏组件。并使用 react-router v6 渲染组件。

我想要所有页面上的导航栏组件和仅第 3 页上的侧边栏，我能够在所有页面上呈现导航栏，但我如何才能在第 3 页上仅显示侧边栏？？？？？

切记不要在page3中直接使用Sidebar组件。

这是代码和图片：

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import Page3 from "./pages/page3/Page3";
import Navbar from "./components/navbar/Navbar";
import Sidebar from "./components/sidebar/Sidebar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </Router>
  );
}

export default App;

【问题讨论】：

您可以将SideBar 导入到Page3，而不是添加为Router 的子项，这将显示在所有页面上。

标签： reactjs react-router

【解决方案1】：

element 将任何有效的 JSX 作为值。在 RRDv6 中，通常使用包装器组件来呈现多个组件或提供仅在特定路由上需要的附加逻辑/UI。在这种情况下，您可以使用 React Fragment 来包装 Sidebar 和 Page3 组件。

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import Page3 from "./pages/page3/Page3";
import Navbar from "./components/navbar/Navbar";
import Sidebar from "./components/sidebar/Sidebar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route
          path="/page3"
          element={(
            <>
              <Sidebar />
              <Page3 />
            </>
          )}
        />
      </Routes>
    </Router>
  );
}

export default App;

一种更常见的方法是将其抽象为一个布局包装组件，该组件可以包装任何路由组件并额外呈现一个侧边栏。当您想要在多个地方执行上述操作并且想要减少代码重复（即使代码更DRY）时，这很有帮助。嵌套的Route 组件被渲染成一个Outlet。

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

const SidebarLayout = () => (
  <>
    <Sidebar />
    <Outlet />
  </>
);

...

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import Page3 from "./pages/page3/Page3";
import Navbar from "./components/navbar/Navbar";
import SidebarLayout from "./components/sidebar/SidebarLayout";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<SidebarLayout />}>
          <Route path="/page3" element={<Page3 />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

【讨论】：

【解决方案2】：

要将多个组件传递给一个Route 并在该路径中显示它们，您可以将这些组件放在一个数组中，并将该数组提供给<Route/> 中的element 属性。

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import Page3 from "./pages/page3/Page3";
import Navbar from "./components/navbar/Navbar";
import Sidebar from "./components/sidebar/Sidebar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={[<Page2/>,<Sidebar/>]} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </Router>
  );
}

export default App;

这样，在/page2 URL 中，您可以访问这两个组件，然后您可以对它们进行布局

【讨论】：