React路由，Routes + Route 如何实现路由的嵌套？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文描述一下react route这个话题里面的路由嵌套，因为react路由实际上有两大类的写法。那么，路由嵌套这个话题也将分为多个文章来完成。本文着眼于第一种BrowserRouter+Routes+Route这种写法进行阐述。

苏南大叔的“程序如此灵动”，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

基础测试代码

还是使用标准的cra模版，进行改造。

create-react-app test
cd test
npm i react-router-dom --save

Outlet占位符

建立几个最简单的页面，page/S.js、page/N.js、page/O.js、page/N.js。代码类似：

import { Outlet } from "react-router-dom";
const Sn = () => {
    return <div> 
        # 第一层S
        <Outlet/>
    </div>
}
export default Sn

不管是上述那种情况，对于子element显示的位置，是在上一层的父element里面定义的，使用的方法就是<Outlet/>。
换句话说，一个react页面组件中出现的<Outlet/>字样，就是留给路由中定义的对应element的子element的。

Routes路由嵌套

react路由，本文的侧重点是：<Routes><Route/></Routes>。路由嵌套的话，实际上就是<Route/>套<Route/>即可。
参考文章：

• https://newsn.net/say/react-router.html
• https://newsn.net/say/react-router-params.html

App.js:

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import S1 from "./page/S";
import N2 from "./page/N";
import O2 from "./page/O";
import K3 from "./page/K";
function App() {
  return (
    <Router>
      <div className="App">
          <Link to="/s">第一层S</Link>__
          <Link to="/s/n">第二层N</Link>__
          <Link to="/s/o">第二层O</Link>__
          <Link to="/s/o/k">第三层K</Link>
          <Routes>
            <Route path="s" element={<S1></S1>} >
              <Route path="n" element={<N2></N2>} ></Route>
              <Route path="o" element={<O2></O2>} >
                <Route path="k" element={<K3></K3>} />
              </Route>
            </Route>
          </Routes>
      </div>
    </Router>
  );
}
export default App;

结束语

苏南大叔觉得这种react route决定组件位置的方式，很难以接受，吐槽完毕。苏南大叔的更多react相关经验文章，请参考下面的链接：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。