React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
山川湖海 2024-07-03 09:07:08 阅读 89
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。
一、经典配置方式
在 React Router 6 中，最经典的配置方式是使用<code>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 />} />code>
<Route path="/about" element={ <About />} />code>
<Route path="/contact" element={ <Contact />} />code>
</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 />}>code>
<Route path="about" element={ <About />} />code>
<Route path="contact" element={ <Contact />} />code>
</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 动态生成了路由配置，并将其渲染到应用中。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。