react-router-dom升级到V6之后API上还是有很多不同的
今天就使用vite+react-ts初始化项目，尝试一下
vite地址：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
react-router-dom地址：https://reactrouter.com/docs/en/v6/getting-started/installation
Antd地址：https://ant.design/components/layout-cn/
用到的路由API有： BrowserRouter、useRoutes、RouteObject、Link、useSearchParams、useParams、matchRoutes、Outlet、useLocation、useNavigate
开始
首先初始化项目
yarn create vite react-dom-6 --template react-ts
这样我们就使用vite脚手架初始化了一个react+ts的项目
进入到我们的项目里面
cd react-dom-6
接下来，把我们所需要的依赖安装一下
yarn
yarn add react-router-dom@6 antd --save
完事版本和目录就是这样的
image.png
启动我们项目
yarn dev // or: npm run dev
在浏览器打开网址
http://localhost:3000/
image.png
接下来把一些不必要的文件可以删除一下
image.png
App.css清空，然后把antd的css样式引入
@import "antd/dist/antd.css"
创建我们自己的页面
在src目录下，创建pages文件夹，用来存放我们自己的组件
在src目录下，创建routers文件夹，用来同意管理路由组件
- 在routers文件夹创建路有组件index.tsx
import { lazy, ReactNode, Suspense } from 'react'
import { RouteObject } from 'react-router-dom'
// import AppLayout from '../AppLayout'
// import Detail from '../Detail'
// import Home from '../Home'
// import Login from '../Login'
// import User from '../User'
// 用懒加载实现优化
// const AppLayout = lazy(() => import('../AppLayout'));
const Detail = lazy(() => import('../Detail'));
const Home = lazy(() => import('../Home'));
const Login = lazy(() => import('../Login'));
const User = lazy(() => import('../User'));
// 切换页面会出现闪屏现象
// 解决思路：公共页面不采用懒加载的方式 并在App.tsx去除Suspense的包裹
import AppLayout from '../AppLayout';
// 实现懒加载的用Suspense包裹 定义函数
const lazyLoad = (children: ReactNode): ReactNode =>{
return Loading...}>
{children}
}
export const routers: RouteObject[] = [
{
path: '/',
element: - main.tsx 组件
import ReactDOM from 'react-dom'
import {BrowserRouter as Router} from "react-router-dom"
import App from './App'
ReactDOM.render(
,
document.getElementById('root'))
- App.tsx 组件
useRoutes:
返回与当前位置匹配的路由元素，参数就是创建的路由对象
import { useRoutes } from 'react-router-dom';
import './App.css';
import { routers } from './pages/router'
function App() {
return useRoutes(routers);
}
export default App;
依次看一下路由对应组件里面的内容
- AppLayout.jsx 组件
matchRoutes: 将给定路由匹配到某个位置并返回匹配数据。
Outlet: 渲染子路由的元素（如果有）
useLocation: 返回当前位置对象，该对象表示web中的当前URL
Link： 用作链接跳转，会渲染成a标签
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { Link, matchRoutes, Outlet, useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { routers } from './router';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
export default function AppLayout() {
const location = useLocation();
const [defaultSelectedKeys, setDefaultSelectedKeys] = useState([]);
const [defaultOpenKeys, setDefaultOpenKeys] = useState([]);
const [isInit, setIsInit] = useState(false)
useEffect(() => {
const routes = matchRoutes(routers, location.pathname); // 返回匹配到的路由数组对象，每一个对象都是一个路由对象
const pathArr: string[] = [];
if(routes !== null) {
routes.forEach((item) => {
const path = item.route.path;
if(path) {
pathArr.push(path);
}
})
}
setDefaultSelectedKeys(pathArr);
setDefaultOpenKeys(pathArr);
setIsInit(true);
}, [location.pathname]);
if(!isInit) {
return null;
}
return (
<>
Home
List
App
)
}
- User.tsx 组件
useSearchParams: 一个语法糖，用于通过URLSearchParams接口读取和写入搜索参数。
URLSearchParams有get、getAll、has、set、sort、toString等方法
用来获取URL传递的参数
import React from 'react'
import { Link, useSearchParams } from 'react-router-dom'
export default function User() {
const [params, _] = useSearchParams();
console.log(params.get("qq")); // 获取参数
return (
- 用户1
- 用户2
- 用户3
- 用户4
)
}
- Detail.tsx 组件
useParams: 从当前参数返回动态参数的键/值对的对象与路由路径匹配的URL
import { useParams } from 'react-router-dom'
export default function Detail() {
const params = useParams();
return (
user Detail-- {params.id}
)
}
下面就是Login登陆组件了
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';
export default funciton Login() {
const navigate = useNavigate();
funciton clickToUser() {
navigate('/');
};
return 差不多就是这个样子，完事之后是这个样子的
image.png
点击用户
image.png
就没了，有兴趣的同学可以尝试一下@～@