12.React路由基础
学习目标
- 能够说出React 路由的作用
- 能够掌握react-router-dom的基本使用
- 能够使用编程式导航跳转路由
- 能够知道React路由的匹配模式
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路由基础
const First =()=>(
页面1的内容
)// 3.使用Router组件包裹整个应用
const App = () =>(
React路由基础
{/* 4.指定路由的入口 /}
页面一
{/ 5.指定路由的出口 */}
)
ReactDOM.render(
<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组件写在哪，渲染出来的组件就展示在哪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(
#### 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 路由的一切都是组件，可以像思考组件一样思考路由
