【React】React-Router路由
React-Router路由
认识React-Router
后端路由阶段
- 早期的网站开发整个HTML页面是由服务器来渲染的.
- 服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示；
- 但是，一个网站,，这么多页面服务器如何处理呢？
- 口 一个页面有自己对应的网址，也就是URL;
- 口 URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理；
- 口 Controller进行各种处理，最终生成HTML或者数据，返回给前端.
- 上面的这种操作，就是后端路由；
- 口 当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端.
- 口 这种情,况下渲染好的页面，不需要单独加载任何的js和css,可以直接交给浏览器展示，这样也有利于SEO的优化 ；
- 后端路由的缺点：
- 口 一种情况是整个页面的模块由后端人员来编写和维护的；
- 口 另一种情况是前端开发人员如果要开发页面，需要通过PHP和Java等语言来编写页面代码；
- 口 而目通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护都是非常糟糕的事情；
前后端分离阶段
- 前端渲染的理解：
- 口 每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染；
- 口 需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件；
- 口 同时可以看到，和之前的后端路由不同，这时后端只是负责提供API了；
- 前后螨分离阶段：
- 口 随若Ajax的出现，有了前后端分离的开发横式；
- 口 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中；
- 口 这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上;
- 口 并且当移动端(OS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套AP即可；
- 口 目前比较少的网站采用这种模式开发；
- 单页面富应用阶段：
- 口 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
- 口 也就是前端来维护一套路由规则，
- 前端路由的核心是什么呢？改变URL，但是页面不进行整体的刷新。
URL的hash
- 前端路由是如何做到URL和内容进行映射呢？监听URL得改变。
- URL的hash
- URL的hash也就是锚点(#)，本质上是改变 window.location的href属性；
- 我们可以通过直接赋值 location.hash来改变href，但是页面不发生刷新；
HTML5的history
- history接口是HTML5新增的，它有六种模式改变URL而不刷新页面：
- replaceState: 替换原来的路径；
- pushState: 使用新的路径；
- popState: 路径的回退；
- go：向前或向后改变路径
- forword：向前改变路径；
- back：向后改变路径
认识react-router
-
目前前端流行的三大框架，都有自己的路由实现：
- 口 Angular的ngRouter
- 口 React的ReactRouter
- 口 Vue的vue-router
-
React Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。
- 口 目前React Router6.x已经非常稳定，我们可以放心的使用；
-
安装React Router：
- 口 安装时，我们选择 react-router-dom；
- 口 react-router会包含一些react-native的内容，web开发并不需要；
npm install react-router-dom
Router的基本使用
-
react-router最主要的API是给我们提供的一些组件：
-
口 BrowserRouter或HashRouter
-
口 Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
-
口 BrowserRouter使用history模式; HashRouter使用hash模式；
<React.StrictMode> <HashRouter> <App /> ＜/HashRouter> </React.StrictMode>
路由映射配置
- Routes：包裹所有的Route，在其中匹配一个路由
- 口 Router5.x使用的是Switch组件
- Route：Route用于路径的匹配；
- 口 path属性：用于设置匹配到的路径；
- 口 element属性：设買匹配到路径后，渲染的组件；
- Router5.x使用的是component属性
- 口 exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；
- Router6.x不再支持该属性
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/home" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
</Routes>
路由配置和跳转
- 口 Link和NavLink：
- 口 通常路径的跳转是使用Link组件，最终会被渲染成a元素；
- 口 Navlink是在Link基础之上增加了一些样式属性（后续学习）
- 口 to属性：Link中最重要的属性，用于设置跳转到的路径；
<div className="nav">
{/* 映射关系： path ---> component */}
<Link to="/home">首页</Link>
<Link to="/about">关于</Link>
</div>
NavLink的使用
-
需求：路径选择时，对应的a元素变为红色
-
这个时候，使用NavLink组件来替代Link组件：
- style ： 传入函数，函数接受一个对象，包含isActive属性
- className：传入函数，函数接受一个对象，包含isActive属性
-
默认的activeClassName：
- 事实上在默认匹配成功时，NavLink就会添加上一个动态的active class；
- 所以，也可以直接编写样式
-
当然，如果你担心这个class在其他地方被使用了，出现样式的层叠，也可以自定义class
Navigate导航
- Navigate 用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中：
- 我们这里使用这个的一个案例：
- 口 用户跳转到Profile界面；
- 口 但是在Profile界面有一个
isLogin用于记录用户是否登录：- true：那么显示用户的名称；
- false：直接重定向到登录界面；
NOT FOUND
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/home" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="*" element={<NotFound />}></Route>
</Routes>
Router的路由嵌套
路由的嵌套
- 在开发中，路由之间是存在嵌套关系的。
- 这里我们假设Home页面中有两个页面内容：
- 口 推荐列表和排行榜列表；
- 口 点击不同的链接可以跳转到不同的地方，显示不同的内容；
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/home" element={<Home />}>
<Route path="/home" element={<Navigate to="/home/recommend" />}></Route>
<Route path="/home/recommend" element={<HomeRecommend />}></Route>
<Route path="/home/ranking" element={<HomeRanking />}></Route>
</Route>
<Route path="/about" element={<About />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="*" element={<NotFound />}></Route>
</Routes>
<div className="subnav">
<Link to="/home/recommend">推荐</Link>
<Link to="/home/ranking">排行</Link>
</div>
<Outlet></Outlet>
Router的代码跳转
手动路由跳转
- 目前我们实现的跳转主要是通过Link或者NavLink进行跳转的，实际上我们也可以通过JavaScript代码进行跳转。
- 口 我们知道Navigate组件是可以进行路由的跳转的，但是依然是组件的方式。
- 口 如果我们希望通过JavaScript代码逻辑进行跳转（比如点击了一个button），那么就需要获取到navigate对象。
- 在Router6.x版本之后，代码类的API都迁移到了hooks的写法：
- 口 如果我们希望进行代码跳转，需要通过useNavigate的Hook获取到navigate对象进行操作；
- 口 那么如果是一个函数式组件，我们可以直接调用，但是如果是一个类组件呢？
import { useNavigate } from 'react-router-dom';
// 高阶组件 : 函数
function withRouter(WrapperComponent) {
return function (props) {
const navigate = useNavigate();
const router = { navigate };
return <WrapperComponent {...props} router={router} />;
};
}
export default withRouter;
Router的参数传递
- 传递参数有两种：
- 动态路由的方式；
- search传递参数；
- 动态路由的概念指的是路由中的路径并不会固定；
- 比如：/detail的path对应一个组件 Detail
- 如果我们将path在Route匹配时写成
/detail/:id,那么 /detail/abc， /detail/123都可以匹配到该Route，并进行显示； - 这个匹配规则，我们称之为 动态路由；
- 通常情况下，使用动态路由可以为路由传递参数。
- search传递参数
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// 高阶组件 : 函数
function withRouter(WrapperComponent) {
return function (props) {
// 导航
const navigate = useNavigate();
// 动态路由参数
const params = useParams();
// 搜索字符串
const [searchParams] = useSearchParams();
const query = Object.fromEntries(searchParams);
const router = { navigate, params, query };
return <WrapperComponent {...props} router={router} />;
};
}
export default withRouter;
<Route path="/detail/:id" element={<Detail />}></Route>
<Link to="/user?name=why&age=18">用户</Link>
Router的配置方式
-
目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的。
-
但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理：
-
口 在早期的时候，Router并且没有提供相关的API，我们需要借助于react-router-config完成；
-
口 在Router6.x中，为我们提供了useRoutes API可以完成相关的配置：
<div> { useRoutes(routes) } </div>
-
const routes = [
{
path:"/",
element:<Navigate to="/home" />
},
{
path:'/home',
element:<Home />,
children:[
{
path:'home/recommend',
element:<HomeRecommend />
}
...
]
}
]
const About = React.lazy(()=> import("../../pages/About"))
<React.StrictMode>
<HashRouter>
<Suspense fallback={<h3>Loading....</h3>}>
<App />
</Suspense>
</HashRouter>
</React.StrictMode>,