阅读量:4
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。
一、经典配置方式
在 React Router 6 中，最经典的配置方式是使用RouterRoutes 、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 动态生成了路由配置，并将其渲染到应用中。
