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';

function App() {
  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 />
	 </>
  );
}

export default 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 />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default 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>
    ),
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default 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>
  )
);

function App() {

在这个示例中，我们使用 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';

function RouterConfig() {
  const routes = [
    { path: '/', element: <Home /> },
    { path: '/about', element: <About /> },
    { path: '/contact', element: <Contact /> },
  ];

  const element = useRoutes(routes);

  return element;
}

function App() {
  return <RouterConfig />;
}

export default 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';

function RouterConfig() {
  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;
}

function App() {
  return <RouterConfig />;
}

export default App;

在这个示例中，我们使用 useState 和 useEffect hook 从服务器获取路由配置数据，并将其存储在 routes 状态中。随后，我们使用 useRoutes hook 动态生成了路由配置，并将其渲染到应用中。