项目接口(页面)
一、路由(路由、路由拦截)
1.新建router文件
1.1 新建routes.jsx
import React from 'react'
const routes = [
{
path: '/',
component: () => import('@/page/Index'),
children: [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
component: () => import('@/page/Home'),
meta: {
title: "首页",
}
},
{
path: '/about',
component: () => import('@/page/Other'),
meta: {
title: "关于",
}
},
]
}
]
export default routes
1.2 新建index.js
import { useRoutes, Navigate, useNavigate } from “react-router-dom”;
import React, { Suspense } from ‘react’
import routes from ‘./routes’
// 路由处理方式
const generateRouter = (routers) => {
return routers.map((item) => {
let res = { ...item };
if (!item?.path) return;
// component
if (item?.component) {
const Component = React.lazy(item.component);
res.element = (<React.Suspense fallback={<div>加载中...</div>}>
<BeforeEach route={item}>
<Component />
</BeforeEach>
</React.Suspense>);
}
// children
if (item?.children) {
res.children = generateRouter(item.children);
}
// 重定向
if (item?.redirect) {
res.element = (
<Navigate to={item.redirect} replace />
)
}
return res;
})
}
function BeforeEach (props) {
if (props?.route?.meta?.title) {
document.title = props.route.meta.title;
}
if (props?.route?.meta?.needLogin) {
// 看是否登录
// const navigate = useNavigate();
// navigate('/login');
}
return <div>
{props.children}
</div>
}
const Router = () => useRoutes(generateRouter(routes))
export default Router
1.3 修改mian.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom";
import './assets/index.module.scss'
import Router from './router/index'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<Router />
</BrowserRouter>
</React.StrictMode>
)
二、路由
- 路由重定向
编写重定向组件,在组件内部实现路由的跳转,从而实现路由的重定向
redirect.jsx
import { useEffect } from 'react';
import { useNavigate, Navigate } from 'react-router-dom';
export function Redirect ({ to, replace, state }) {
const navigate = useNavigate();
useEffect(() => {
navigate(to, { replace, state });
});
return null;
}
怎么使用呢?判断一下如果是重定向
<Route path="/" element={<Redirect to="/home" />} />
- 路由传参
react router v6 获取传参需要用两个 hook,分别是 useParams(params)和 useSearchParams(search)
2.1 useParams
params 传参
import { NavLink } from 'react-router-dom';
{/* 路由定义 /article/:id */}
<NavLink to={`/Other/1`}>文章1</NavLink>
接收参数
import { useParams } from 'react-router-dom'
/* params */
const params = useParams();
const { id } = params;
2.2 useSearchParams
search 传参
import { NavLink } from 'react-router-dom';
<NavLink to={`/Home?id=1`}>文章1</NavLink>
接收参数
import { useSearchParams } from 'react-router-dom'
/* search */
let [searchParams, setSearchParams] = useSearchParams();
const { id } = searchParams;
2.3 useLocation
state 传参
import { NavLink } from 'react-router-dom';
<NavLink to="/Home" state={{ id: 1 }}>文章1</NavLink>
接收参数
import { useLocation } from 'react-router-dom'
let location = useLocation();
const { id } = location.state;
2.4 编程式路由跳转 useNavigate
import { FC, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';
interface IndexProps{}
const Index=() => {
const navigate = useNavigate();
// 返回
const handleBack = () => navigate(-1);
// 前进
const handleForward = () => navigate(1);
// 刷新
const handleRefresh = () => navigate(0);
//
return <>
<Button type="primary" onClick={handleBack}>返回</Button>
<Button type="primary" onClick={handleForward}>前进</Button>
<Button type="primary" onClick={handleRefresh}>刷新</Button>
{/* 跳转路由 */}
<Button type="primary" onClick={() => navigate('/Other/1', { replace: true })}>params</Button>
<Button type="primary" onClick={() => navigate('/Other?id=1', { replace: true })}>search</Button>
<Button type="primary" onClick={() => navigate('/Other', { replace: true, state: { id: 1 } })}>state</Button>
</>
}
export default Index;
三、新建page文件
1.新建Index.jsx (例子查看)
import React from 'react';
import Home from './Home'
const Index = () => {
return (
<div>
152535
<Home></Home>
</div>
);
};
export default Index;
完成