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

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

虽然网络上的大多数教程，都在告诉大家，要把路由配置信息集中保存到一个单独的文件里面。但是，事实上，这些多层嵌套的路由信息还是可以分散到各个组件里面的。也就是说一个react项目里面，定义多组<Routes>+<Route>，并非单独一个<Routes>。这就是本文主要讨论的内容。

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

前置文章

本文是基于下面这篇文章《react路由，Routes + Route 如何实现路由的嵌套？》修改的，链接如下：

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

主要修改的部分有：

• NavLink，https://newsn.net/say/react-link.html
• Css，https://newsn.net/say/react-css.html
• 默认首页，https://newsn.net/say/react-router-routes-index.html
• 404，https://newsn.net/say/react-router-404.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;

page/S.js:

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

这里的第一层路由信息下面，有两条子路由，还有一条孙路由，本文就是主要针对这三条路由信息进行修改的。

分离式路由

现在要把上述三条路由信息，移动到S组件之中：
App.js:

import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink,
} from "react-router-dom";
import S1 from "./page/S";
function App() {
  return (
    <Router>
      <div className="App">
        <style>{"a{margin-right:8px;}"}</style>
        <style>{"a.active{color:red;font-weight:bold;}"}</style>
        <NavLink to="/s">第一层S</NavLink>
        <NavLink to="/s/n">第二层N</NavLink>
        <NavLink to="/s/o">第二层O</NavLink>
        <NavLink to="/s/o/k">第三层K</NavLink>
        <Routes>
          <Route path="/" element={<div>home</div>} />
          <Route path="*" element={<div>404</div>} />
          <Route path="/s/*" element={<S1></S1>} />
        </Routes>
      </div>
    </Router>
  );
}
export default App;

注意看：对于s的路由配置path，写的是/s/*，注意/*。

page/S.js:

import { Outlet, Routes, Route } from "react-router-dom";
import N2 from "./N";
import O2 from "./O";
import K3 from "./K";
const Sn = () => {
    return <div>
        # 第一层S
        <Routes>
            <Route path="n" element={<N2></N2>} ></Route>
            <Route path="o" element={<O2></O2>} >
                <Route path="k" element={<K3></K3>} />
            </Route>
        </Routes>
    </div>
}
export default Sn

注意看：被分割出来的子路由，代替了<Outlet/>位置。

/* 和 *

这里引入404的path，就是要和这种组件里面带Routes信息的组件形成对比。这种特殊的组件，需要写成/*，才能做到匹配。否则，相关设置不生效。

结束语

路由信息可以多次分割，分散到多个组件中去。写法也由Outlet换成了Routes。苏南大叔认为：这样设置更加完美一些，更加好理解。更多苏南大叔的react经验文章，请参考：

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

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