目录
一、React路由
1、React Router4.0基本概述:
React Router4.0(以下简称 RR4)遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编程简单来讲就是你只需要关心做什么,而无需关心如何去做,可组合性的特点。
2、RR4 采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:
- react-router React Router 核心
- react-router-dom 用于 DOM 绑定的 React Router
- react-router-native 用于 React Native 的 React Router
- react-router-redux React Router 和 Redux 的集成
- react-router-config 静态路由配置的小助手
3、SPA
Single Page Application : 单页面应用,整个应用只加载一个页面(入口页面),后续在与用户的交互过程中,通过 DOM 操作在这个单页上动态生成结构和内容
优点:
- 有更好的用户体验(减少请求和渲染和页面跳转产生的等待与空白),页面切换快
- 重前端,数据和页面内容由异步请求(AJAX)+ DOM 操作来完成,前端处理更多的业务逻辑
缺点:
- 首次进入处理慢
- 不利于 SEO
3、安装
载安装 react 路由
npm i -S react-router-dom
二、组件
1、BrowserRouter 组件
(1)BrowserRouter 组件是什么?
BrowerRouter:页面跳转原理是使用了pushState、replaceState,路径不包含#直接定位到/目录下
使用方式
index.js 引入
import {
BrowserRouter } from 'react-router-dom';
ReactDOM.render(
< BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
2、HashRouter 组件
(1)HashRouter 组件是什么?
HashRouter:页面跳转原理是使用了location.hash、location.replace,并且路径中是包含/#
使用方式
import {
HashRouter } from 'react-router-dom';
ReactDOM.render(
< HashRouter>
<App />
</HashRouter>,
document.getElementById('root')
);
3.BrowserRouter 组件 和 HashRouter 组件的区别
- (1)BrowerRouter的开启需要后端配置的,类似于Vue中的history模式。HashRouter类型于Vue中的hash模式
- (2)从页面的地址栏中可以看出HashRouter是包含#号的,而BrowerRouter是包含/号的
三、Route 组件配置路径
1、Route 组件
通过该组件来设置应用单个路由信息,Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候,后面 component 将要显示的区域
代码展示
import React from "react"
import {
Route} from "react-router-dom";
import IndexPage from './view/index';
import AboutPage from './view/about';
import AboutMorePage from './view/aboutMore';
function App() {
return (
<div>
<Route path="/" component={
IndexPage}/>
<Route path="/about" component={
AboutPage}/>
<Route path="/about/more" component={
AboutMorePage}/>
</div>
);
}
export default App;
React 的配置路由跳转可以分为:
- 在上面引入 Route 和 组件地址
- 上面使用的是 函数式组件,你也可以使用类组件,在 return 里面 使用 Route 单标签,里面写入匹配的路径 和 组件地址
2、exact
exact 属性表示路由使用 精确匹配模式,非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由
path中 匹配url的方式不是相等,而是 以指定的 url 开头
为了解决这个问题, 你可以在配置路径时,在里面 加上一个单词 exact
代码展示
function App() {
return (
<div className="App">
{
/* <Route path="/" exact component={IndexPage} />
<Route path="/about" exact component={AboutPage} />
<Route path="/about/more" exact component={AboutMorePage} /> */}
<nav />
</div>
);
}
3、Link 组件
Link 组件用来处理 a 链接 类似的功能(它会在页面中生成一个 a 标签),但设置这里需要注意的,react-router-dom 拦截了实际 a 标签的默认动作,然后根据所有使用的路由模式(Hash 或者 HTML5)来进行处理,改变了 URL,但不会发生请求,同时根据 Route 中的设置把对应的组件显示在指定的位置
import Reac