【react-router】react-router v6 路由基本配置
首先需要先下载 react-router-dom
npm install react-router-dom
新建router文件夹，设置路由配置：
src/router/index.tsx
import { lazy } from "react";
import { Navigate } from "react-router-dom";
const Login = lazy(() => import('../pages/Login'));
const Null404 = lazy(() => import('../components/404'));
const Layout = lazy(() => import('../pages/Layout'));
const Home = lazy(()=>import('../pages/Home'));
const AdminOperate = lazy(()=>import('../pages/Admin/AdminOperate'))
const Router = [
{
path:'/',
element: <Navigate to="/home"/>
},
{
path: '/',
element: <Layout />,
children:[
//路由嵌套
{ path: '/home', element: <Home />},
{path: '/admin/adminOperate',element: <AdminOperate />}
]
},
{
path: '/login',
element: <Login/>
},
{
path: '/*',
element: <Null404 />
}
]
export default Router
这只是基本的路由配置，如果有需要比如路由拦截、权限问题需再进行设置；
main.tsx文件
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";
createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
App.tsx文件
import { useRoutes } from "react-router-dom";
import "./App.css";
import routes from './router'
function App() {
const elements = useRoutes(routes)
return elements;
}
export default App;
Layout.tsx文件
src/pages/Layout/index.tsx
import { Outlet } from "react-router-dom";
export default function Layout() {
return (
<div className="c-Layout-index">
左侧菜单xxxx
<div className="appMainWrap">
头部区域xxxx
<div className="appMain">
<Outlet />
</div>
</div>
</div>
);
}
- useRoutes是用来定义路由表的；
- Navigate路由重定向，之前5版本的重定向是使用Redirect，现在6用Navigate；
- outlet是应用于嵌套路由的占位的；
- NavLink可以实现路径的跳转；
- …
这里我在Layout文件下加了NavLink跳转去实现组件的切换；
<NavLink to={"/home"}> 去home</NavLink><br />
<NavLink to={"/admin/adminOperate"}> 去adminOperate</NavLink>
这里会报错（如下）：
在定义路由的时候我使用了lazy，但是并没有使用Suspense，控制台就会报错；
Suspense 和 lazy 在 React 中通常一起使用，但它们各自有不同的作用。理解它们的关系和用途有助于更好地管理和优化你的应用；
lazy
- 作用: lazy 用于懒加载组件。它允许你动态导入组件，而不是在应用启动时一次性加载所有组件。
- 用法: const MyComponent = lazy(() => import(‘./MyComponent’));
Suspense
-
作用: Suspense 用于在组件加载过程中显示回退内容（如加载指示器）。它提供了更好的用户体验，避免了空白页面的出现。
-
用法
<Suspense fallback={<div>Loading...</div>}> <MyComponent /> </Suspense>
虽然 Suspense 和 lazy 经常一起使用，但它们并不是必须一起使用。不过，为了处理懒加载组件的加载状态，通常推荐一起使用它们。
如果你只使用 lazy 而不使用 Suspense，React 会在组件加载完成之前抛出一个错误，导致应用崩溃。因此，通常不推荐这样做，（报错如上截图）。
如果你只使用 Suspense 而不使用 lazy，Suspense 将不会有任何效果，因为它需要与懒加载组件一起工作。
通常情况下，建议将 Suspense 和 lazy 一起使用，以确保在组件加载过程中提供良好的用户体验。
suspense的字面意思就是悬而不决，用在平时开发中，就可以理解为还没有完成的事，你不知道啥时候完成。也就是异步，异步加载组件，异步请求数据。
详解可点击查看这篇博客
附上结合上述代码的截图：
react-router-dom官网
原文地址：https://blog.csdn.net/m0_69892739/article/details/144030106
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！