React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载

React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。

一、经典配置方式

在 React Router 6 中，最经典的配置方式是使用

Router

Routes

、

Route

、组件进行路由配置。以下是一个示例代码：

import{ BrowserRouter as Router, Routes, Route}from'react-router-dom';import Home from'./Home';import About from'./About';import Contact from'./Contact';functionApp(){return(<><Router><Routes><Route exact path="/" element={<Home />}/><Route path="/about" element={<About />}/><Route path="/contact" element={<Contact />}/></Routes></Router>{/* 类似vue-router中的 <router-view /> ,显示路由对应的组件的地方 */}<Outlet /></>);}exportdefault App;

在这个示例中，我们使用

BrowserRouter

组件创建了一个路由器，并在其中使用

Routes

组件包裹了多个

Route

组件。每个

Route

组件都包含一个

path

属性和一个

element

属性，分别表示路由路径和对应的组件。当用户访问某个路由时，React Router 会匹配到对应的

Route

组件，并渲染其中的组件。

二、疑问：还有其它方式吗？能否像VueRouter一样通过数组配置？

当然可以，React Router 6 提供了多种配置路由的方式，每种方式都有其适用场景和特点。可以根据项目需求、团队习惯以及路由复杂程度来选择最适合的配置方式。

三、React Router 6 中的 5 种路由配置方式

下面介绍 React Router 6 中的 5 种路由配置方式，并结合示例代码进行解释说明。

1. 使用数组配置

使用

createBrowserRouter

或

createHashRouter

函数，以数组形式定义嵌套路由。这种方式类似于 Vue Router 中的路由配置。以下是一个示例代码：

import{ createBrowserRouter, RouterProvider }from'react-router-dom';import Home from'./Home';import About from'./About';import Contact from'./Contact';const router =createBrowserRouter([{path:'/',element:<Home />,},{path:'/about',element:<About />,},{path:'/contact',element:<Contact />,},]);functionApp(){return<RouterProvider router={router}/>;}exportdefault App;

在这个示例中，我们使用

createBrowserRouter

函数创建了一个路由器，并传入了一个包含多个路由对象的数组。每个路由对象都包含

path

和

element

两个属性，分别表示路由路径和对应的组件。最后，我们使用

RouterProvider

组件将路由器提供给整个应用。

2. 使用 React.lazy 和 Suspense 进行代码分割

使用

React.lazy

和

Suspense

可以实现路由组件的延迟加载，优化应用的初始加载时间。以下是一个示例代码：

import{ createBrowserRouter, RouterProvider, Suspense }from'react-router-dom';import Home from'./Home';const About = React.lazy(()=>import('./About'));const Contact = React.lazy(()=>import('./Contact'));const router =createBrowserRouter([{path:'/',element:<Home />,},{path:'/about',element:(<Suspense fallback={<div>Loading...</div>}><About /></Suspense>),},{path:'/contact',element:(<Suspense fallback={<div>Loading...</div>}><Contact /></Suspense>),},]);functionApp(){return<RouterProvider router={router}/>;}exportdefault App;

在这个示例中，我们使用

React.lazy

函数动态导入了

About

和

Contact

两个组件，并使用

Suspense

组件为它们添加了一个加载中的提示。这样一来，这两个组件只有在真正需要渲染时才会被加载，提高了应用的初始加载速度。

3. 使用对象配置

使用

createRoutesFromElements

函数和

Route

组件，以 JSX 语法定义路由配置对象。这种方式类似于 Vue Router 中使用对象配置路由。以下是一个示例代码：

import{ createBrowserRouter, RouterProvider }from'react-router-dom';import{ createRoutesFromElements, Route }from'react-router-dom';import Home from'./Home';import About from'./About';import Contact from'./Contact';const router =createBrowserRouter(createRoutesFromElements(<Route path="/" element={<Home />}><Route path="about" element={<About />}/><Route path="contact" element={<Contact />}/></Route>));functionApp(){

在这个示例中，我们使用

createRoutesFromElements

函数创建了一个路由配置对象，并使用 JSX 语法定义了路由的嵌套关系。最终，我们使用

createBrowserRouter

函数创建了一个路由器，并传入了路由配置对象。

4. 使用函数动态创建路由配置

使用

useRoutes

hook 和

React.createElement

，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。以下是一个示例代码：

import{ useRoutes }from'react-router-dom';import Home from'./Home';import About from'./About';import Contact from'./Contact';functionRouterConfig(){const routes =[{path:'/',element:<Home />},{path:'/about',element:<About />},{path:'/contact',element:<Contact />},];const element =useRoutes(routes);return element;}functionApp(){return<RouterConfig />;}exportdefault App;

在这个示例中，我们定义了一个

RouterConfig

函数组件，在其中使用

useRoutes

hook 动态创建了路由配置对象。最终，我们将

RouterConfig

组件渲染到应用中，实现了路由的配置。

5. 从服务器加载路由配置数据

将路由配置数据存储在服务器上，在应用启动时从服务器获取该数据，然后使用

useRoutes

hook 动态生成路由配置。以下是一个示例代码：

import{ useRoutes }from'react-router-dom';import Home from'./Home';import About from'./About';import Contact from'./Contact';functionRouterConfig(){const[routes, setRoutes]=useState([]);useEffect(()=>{fetch('/api/routes').then((res)=> res.json()).then((data)=>setRoutes(data));},[]);const element =useRoutes([{path:'/',element:<Home />},{path:'/about',element:<About />},{path:'/contact',element:<Contact />},...routes,]);return element;}functionApp(){return<RouterConfig />;}exportdefault App;

在这个示例中，我们使用

useState

和

useEffect

hook 从服务器获取路由配置数据，并将其存储在

routes

状态中。随后，我们使用

useRoutes

hook 动态生成了路由配置，并将其渲染到应用中。