当前位置：首页 > news >正文

一天搞定React（5）——ReactRouter（下）【已完结】

news 来源：原创 2024/9/8 9:21:09

Hello！大家好，今天带来的是React前端JS库的学习，课程来自黑马的往期课程，具体连接地址我也没有找到，大家可以广搜巡查一下，但是总体来说，这套课程教学质量非常高，每个知识点都有一个小案例，最后有一个总的美团外卖案例教学，大家可以看看我这篇文章，如果能够帮到你们，还请多多点赞o(￣▽￣)ｄ支持支持🌹，如果文章中有错误的或者是遗漏信息，可以在评论区指出或者是与我私信。我看到了消息，一定会及时更正过来∠(°ゝ°)。话不多说，直接开学💪⛽️

本篇教学已完结，具体可查看教程：
1. 一天搞定React（1）——React安装与配置
2. 一天搞定React（2）——JSX语法
3. 一天搞定React（3）——Hoots组件
4. 一天搞定React（4）——Redux
5. 一天搞定Recat（5）——ReactRouter（上）
6. 一天搞定React（5）——ReactRouter（下）

文章目录

- 嵌套路由
- - 默认二级路由
  - 404路由配置
- 两种路由模式

嵌套路由

嵌套路由：在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由。

步骤：

使用children属性配置路由嵌套关系

const router = createBrowserRouter([{path:'/第一个页面名称',element:<组件一 />children:[	//使用`children`属性配置路由嵌套关系{path:'/嵌套组件名称',element:<组件二 />}]},
])

来到一级路由组件内部，使用<Outlet/>组件配置二级路由渲染位置

import{ Link,Outlet } from 'react-router-dom'
const 一级组件名称 =()=>{return(<div><Link to="/嵌套组件路径">嵌套组件</Link><Outlet />	//配置二级路由的出口</div>)
}export default Layout

默认二级路由

当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true。

添加index: true属性实现默认二级路由

children:[	//设置为默认二级路由一级路由访问的时候，它也能得到渲染{index: true,element:<组件二 />}

在一级组件里面配置

const 一级组件名称 =()=>{return(<div><Link to="/">嵌套组件</Link>	//因为path已经去掉了，所以没有必要再写上路径<Outlet />	//配置二级路由的出口</div>)
}

404路由配置

当浏览器输入url的路径在整个路由配置中都找不到对应的path，为了用户体验，可以使用404兜底组件进行渲染。这样就可以提示用户出现了404错误。

步骤：

准备一个NotFound组件（新建一个NotFound包，里面创建一个index.js文件）
```
const NotFound = ()={return <div>出现404错误</div>
}
export default NotFound
```

在路由表数组的末尾，以*号作为路由path配置路由

const router = createBrowserRouter([{path:'/第一个页面名称',element:<组件一 />children:[	//使用`children`属性配置路由嵌套关系{path:'/嵌套组件名称',element:<组件二 />}]},//在路由表数组的末尾，以`*`号作为路由path配置路由{path:`*`，element:<NotFound />}
])

两种路由模式

与vue一样也是有两种路由模式，history模式和hash模式。ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建。

这两种模式一共有以下区别：

Hash模式：
- 使用URL中的#号来标记路由路径（如http://example.com/#/home）。
- 不会引起页面重新加载，兼容性较好，所有现代浏览器都支持。
- 适用于对SEO要求不高或需要兼容老旧浏览器的场景。
History模式：
- 利用HTML5 History API（如pushState和replaceState）实现URL的更新，无需#号（如http://example.com/home）。
- 可以实现更美观的URL地址，但需要服务器端的配合来确保深层链接的有效性。
- 适用于对SEO有一定要求或需要更美观URL地址的场景。

在我们之前一直用的都是history路由模式来编写的。

import {createBrowserRouter} from 'react-router-dom'
const router = createBrowserRouter([{path:'/第一个页面名称',element:<组件一 />},
])

使用hash路由模式如下：

import {createHashRouter} from 'react-router-dom'		//只需要将原来的`createBrowerRouter`更改为`createHashRouter`
const router = createHashRouter([{path:'/第一个页面名称',element:<组件一 />},
])