React路由，单独配置路由信息为数组文件，最佳实践总结

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

目光再次返回看react路由，在某一篇文章里面，苏南大叔曾经提过：如果把react路由信息单独提取出来，配置为数组文件，会更加方便和自由。其中，路由的provider的使用方法中，就是这样单独配置为数组的。在本篇文章中，将再次审视一下这种讲路由信息单独配置为数组文件的可能性写法。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

前文回顾

在路由同构的文章里面，苏南大叔曾经讲过提取路由数组配置信息为单独文件的事情。本文与上一篇文章的不同之处在于：关于路由同构的路由信息的处理方式不同。

上一篇文章中，路由的配置信息，有两种。一个是<Routes>+<Route>的组合。另外一种是通过记录了路由信息的数组文件，生成RouterProvider所需要的Router属性信息。

在本篇文章中，路由配置信息全部存储在路由数组文件中，不管是<Routes>的写法，还是<RouterProvider>的写法，都通过这个路由数组文件生成而来。

本文以下面这篇文章为基础。参考：

• https://newsn.net/say/react-common.html

公共文件：路由数组

Routes.js（使用了“配置数组信息”）:

import React from "react";
import { Link } from "react-router-dom";
import Post from "./Post";
const routers = [
  {
    path: "/",
    element: <Link to="/post/123">Post</Link>,
  },
  {
    path: "/post/:id",
    element: <Post />,
  },
];
export default routers;

写法一，<Routes>

这种React路由，具体上可以分为很多种使用情况，分别是：

• 浏览器端，<BrowserRouter> + <Routes>
• 浏览器端，<HashRouter> + <Routes>
• 服务器端，<StaticRouter> + <Routes>

按照React SSR的路由同构的原则，他们需要出现在<Routes>上一级的文件（Index.js？）中，而不能出现在<Routes>同文件代码的周边里面，否则就无法实现路由同构了。也就是说，对于本文的写作目的（routes数组定义的使用）来说，这里仅仅需要关注同一个代码的使用即可，不同的地方（Router）是出现在其他文件里面的。

App.js:

import React from "react";
import { Routes, Route } from "react-router-dom";
import RoutesConfig from "./Routes";
function App() {
  return (
    <Routes>
      {RoutesConfig.map(({ path, element, ...routes }) => (
        <Route key={path} path={path} element={element} {...routes} />
      ))}
    </Routes>
  );
}
export default App;

具体使用哪种Router，这里不做详细解读，但是必然会出现以下三种import代码之一。

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import { HashRouter as Router, Routes, Route } from "react-router-dom";

import { StaticRouter as Router } from "react-router-dom/server";
import { Routes, Route } from "react-router-dom";

参考文章：

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

写法二，createXxxRouter() + <RouterProvider />

第二种情况，就是由createXxxRouter()加载路由数组，形成Router对象，然后当作属性传递给<RouterProvider>。可能的排列组合有：

• 浏览器端，createBrowserRouter() + <RouterProvider />
• 浏览器端，createHashRouter() + <RouterProvider />
• 服务器端，createStaticRouter() + `

测试代码如下：
App.js:

import React from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import RoutesConfig from "./Routes";
const router = createBrowserRouter(RoutesConfig);
function App() {
  return <RouterProvider router={router}></RouterProvider>;
}
export default App;

createXxxRouter()天然支持把数组信息当作参数进行传递。所以，这里没有啥特别说的。参考文章：

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

总结

本文主要想要表达的是：<Routes>+<Route>这个方案里面，也是可以使用路由信息数组的。方法就是通过Routes.map()临时组装<Route>。

更多苏南大叔的React经验文章，请参考：

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

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