12.React路由基础

学习目标

  • 能够说出React 路由的作用
  • 能够掌握react-router-dom的基本使用
  • 能够使用编程式导航跳转路由
  • 能够知道React路由的匹配模式
#### 1.React路由介绍 现代的前端应用大多都是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好,对服务器的压力更小,所以更受欢迎。 为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。 前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面) 前端路由是一套映射规则,在React中,是URL路径组件的对应关系:让用户从一个视图(页面)导航到另一个视图(页面) 使用React路由简单来说,就是配置是路径组件(配对) #### 2.路由的基本使用

2.1路由的基本使用

``` 1.安装:yarn add react-router-dom 2.导入路由的三个核心组件:Router/Route/Link import {BrowserRouter as Router,Route,Link} from 'react-router-dom' 3.使用Router组件包裹整个应用(重要) const App = () =>{

React路由基础

} 4.使用Link组件作为导航菜单(路由入口) 登录 5.使用Router 组件配置路由规则和要展示的组件(路由出口) ``` ``` // 1.安装:yarn add react-router-dom // 2.导入组件 import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

const First =()=>(

页面1的内容

)

// 3.使用Router组件包裹整个应用
const App = () =>(


React路由基础


{/* 4.指定路由的入口 /}
页面一
{/
5.指定路由的出口 */}



)

ReactDOM.render(,document.getElementById('root'))

<h3>2.2常用组件说明</h3>
* Router组件:包裹整个应用,一个React应用只需要使用一次
* 两种常用 Router:HashRouter 和 BrowserRouter
* HashRouter:使用URL 的哈希值实现(localhost:3000/#/first)-不推荐

import {HashRouter as Router,Route,Link} from 'react-router-dom

*  BrowserRouter:使用H5 的history API实现(localhost:3000/first)-推荐

import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

* Link组件:用于指定导航连接(a标签)

//to属性:浏览器地址栏中的pathname(location.pathname)

页面一 ``` * Route组件:指定路由展示组件相关信息 ``` //path属性:路由规则 //component属性:展示的组件 //Route组件写在哪,渲染出来的组件就展示在哪 ``` #### 3.路由的执行过程 ``` 1.点击Link组件(a标签),修改了浏览器地址栏中的url 2.React 路由监听到地址栏 url 的变化 3.React 路由内部遍历所有Route组件,使用 路由规则(path)与 pathname 进行匹配 4.当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容 ``` ``` // 1.安装:yarn add react-router-dom // 2.导入组件 import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

const First =()=>(

页面1的内容

)
const Home =()=>(

页面home的内容

)

// 3.使用Router组件包裹整个应用
const App = () =>(


React路由基础


{/* 4.指定路由的入口 /}
页面一


页面home
{/
5.指定路由的出口 */}




)

#### 4.编程式导航

场景:点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现?
编程式导航:通过JS 代码来实现页面跳转
history:是React路由提供的,用于获取浏览器历史记录的相关信息
push(path):跳转到某个页面,参数path 表示要跳转的路径
go(n):前进或后退到某个页面,参数n表示前进或后退页面数量(比如:-1表示后退到上一页)
class Login extends React.Component{
handleLogin =()=>{
//使用编程式导航实现路由跳转
//...省略其他功能代码
this.props.history.push('/home')
}
render(){
return(


登录页面:




)
}
}

import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

class Login extends React.Component{
handleLogin =()=>{
//使用编程式导航实现路由跳转
//...省略其他功能代码
this.props.history.push('/home')
}
render(){
return(


登录页面:




)
}
}
const Home =(props)=>{
const backLogin=()=>{
//go(-1) 返回上一个页面
props.history.go(-1)
}
return(

我是后台页面




)
}

const App =()=>(


编程式导航


去登录页面
{/*

去home页面 */}


</Router>

)
ReactDOM.render(,document.getElementById('root'))

#### 5.默认路由

问题:现在的路由都是点击导航菜单后展示的,如何在进入页面的时候就展示呢?
默认路由:表示进入页面时就会匹配的路由
默认路由path为:/

#### 6.匹配模式
##### 6.1 模糊匹配模式

问题:当Link组件的 to属性值为 “/login” 时,为什么默认路由也被匹配成功?
默认情况下,React路由是模糊匹配模式
模糊匹配规则:只要pathname以path开头就会匹配成功
/ 能够匹配所有的pathname
/first 能够匹配/first 或 /first/a 或 /first/a/b...

##### 6.2精确匹配

问题:默认路由任何情况下都会展示,如何避免这种问题?
给 Route 组件添加 exact 属性,让其变为 精确匹配模式
精确匹配:只有当 path 和 pathname 完全匹配时才会展示该路由

//推荐给默认路由添加 exact 属性

<h2>总结</h2>

1.React 路由可以有效的管理多个视图(组件)实现SPA
2.Router 组件包裹整个应用,只需要使用一次
3.Link组件是入口,Route组件是出口
4.通过props.history 实现编程式导航
5.默认是模糊匹配,添加exact 变精确匹配
6.React 路由的一切都是组件,可以像思考组件一样思考路由

posted @ 2020-02-03 16:58  ヾ百毒不侵  阅读(165)  评论(0编辑  收藏  举报