react router v6 版本的路由实现
喜欢就点赞呗
安装
pnpm add react-router-dom完整代码
# App.tsx
function App() {
return (
。
);
}Api
| 方法 | 意义 |
|---|---|
| useParams | 返回当前参数 根据路径读取参数 |
| useNavigate | 返回当前路由 代替原有V5中的 useHistory |
| useOutlet | 返回根据路由生成的element |
| useLocation | 返回当前的location 对象 |
| useRoutes | 同Routers组件一样，只不过是在js中使用 |
| useSearchParams | 用来匹配URL中?后面的搜索参数 |
基本路由实现
其中Home, 和About的代码就不进行展示了
则是定义路由
| 地址 | 组件 |
|---|---|
| localhost:3000/ | Home组件 |
| localhost:3000/about | About组件 |
不过这些很快就能分清楚, 不过需要深入了解的是嵌套路由
下面的代码主要也是list为主
404路由
当Routes中寻找不到的时候, 我们在最后一个路由中添加正则就可以指定404了
重定向
使用导航组件重定向
我们可以通过使用 React Router 的 Navigate 组件来执行声明性重定向。在下面的示例中，每当用户导航到"关于"页时，导航组件都将以声明方式执行重定向：
const About = () => {
const shouldRedirect = true;
return (
<>
About
{shouldRedirect && 如果我们想在路由级别对此进行管理，我们也可以使用以下替代解决方案：
# App.tsx
使用重定向导航钩子
const About = () => {
const shouldRedirect = true;
const navigate = useNavigate();
React.useEffect(() => {
if (shouldRedirect) {
navigate('/home');
}
});
return (
<>
About
);
};每当组件呈现时，React 的 useEffect Hook 都会运行，并将以编程方式执行重定向。
嵌套路由(list)的实现
上方代码主要组成是这样的,
当我们访问http://localhost:3000/list
当我们访问http://localhost:3000/list/1
完整代码
List.tsx
Outlet 嵌套路由类似 {children}
import { Outlet } from 'react-router-dom';
class List extends React.Component {
constructor(props: React.FC) {
super(props);
}
render() {
return (
Blog
ListLink.tsx
const lists = {
"1": {
title: "第一篇文章",
desc: "test1",
},
"2": {
title: "第二篇文章",
desc: "test2",
},
};
class ListLink extends React.Component {
constructor(props: React.FC) {
super(props);
}
render() {
return (
{Object.entries(lists).map(([key, { title }]) => (
-
{title}
))}
);
}
}ListId.tsx
useParams 获取路由参数
export default function ListId() {
const lists: Record<
string,
{
title: string;
description: string;
}
> = {
"1": {
title: "第一篇博客文章",
description: "第一篇博客文章，是关于Vue3.0的",
},
"2": {
title: "第二篇博客文章",
description: "Hello React Router v6",
},
};
const { id } = useParams();
const blog = lists[id as string];
const { title, description } = blog;
return (
{title}
{description}
);
}路由统一管理及路由拦截方案
这篇文章已经写的很好了, 就不重复说明了
react-router v6 路由统一管理及路由拦截方案