按需分割React 6与React Router页面

2 年 ago
文, 翔
1 minute

只需一种版本。请用中文将以下内容重新表述。

"react": "^18.2.0",
"react-dom": "^18.2.0",

常规路由

不使用BrowserRouter

  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/page1" element={<Page1 />} />
    <Route path="/page2" element={<Page2 />} />
  </Routes>

经常被推荐的巢

使用以下方法，会同时显示父页面的内容。

// page1/nestでアクセス可能
<Route path="/page1" element={<Page1 />}>
  <Route path="nest" element={<Nest />} />
</Route>

// NestがPage1にくっつく形で処理される
// 親であるPage1でOutletを使用する
import { Outlet } from "react-router-dom";
const Page1 = () => {
  return (
  <>
    ...
    // returnの1番最後に書く
    <Outlet />
  </>
  )
}

只显示独立页面，不显示母页面。

大部分被推荐的方法是通过传递组件，并显示传递的组件作为子组件的方法。可能因为此方法需要考虑较多的编写量，所以不适用于以下情况吗？个人而言，我喜欢这种类似于Rails的方法，但是否有某种理由呢？

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/page1" element={<Page1 />} />
  <Route path="/page1/:id" element={<User />} />
  <Route path="/page2" element={<Page2 />} />
  <Route path="/page2/nest" element={<Nest />} />
  <Route path="/*" element={<NotFound />} />
</Routes>
bannerAds