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 = () =>{
    <Router>
        <div>
            <h1>React路由基础</h1>
        </div>
    </Router>
}
4.使用Link组件作为导航菜单（路由入口）
<Link to="/login">登录</Link>
5.使用Router 组件配置路由规则和要展示的组件（路由出口）
<Route path="/login" component={First}></Route>

// 1.安装：yarn add react-router-dom
// 2.导入组件
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

const First =()=>(<p>页面1的内容</p>)
   
// 3.使用Router组件包裹整个应用
const App = () =>(
    <Router>
        <div>
            <h1>React路由基础</h1>
            {/* 4.指定路由的入口 */}
            <Link to="/first">页面一</Link>
            {/* 5.指定路由的出口 */}
            <Route path="/first" component={First}></Route>
        </div>
    </Router>
)

ReactDOM.render(<App />,document.getElementById('root'))

2.2常用组件说明

• 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）
 <Link to="/first">页面一</Link>

• Route组件：指定路由展示组件相关信息

//path属性：路由规则
//component属性：展示的组件
//Route组件写在哪，渲染出来的组件就展示在哪
<Route path="/first" component={First}></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 =()=>(<p>页面1的内容</p>)
const Home =()=>(<p>页面home的内容</p>)
   
// 3.使用Router组件包裹整个应用
const App = () =>(
    <Router>
        <div>
            <h1>React路由基础</h1>
            {/* 4.指定路由的入口 */}
            <Link to="/first">页面一</Link>
            <br/>
            <Link to="/home">页面home</Link>
            {/* 5.指定路由的出口 */}
            <Route path="/first" component={First}></Route>
            <Route path="/home" component={Home}></Route>
        </div>
    </Router>
)

4.编程式导航

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

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

class Login extends React.Component{
    handleLogin =()=>{
        //使用编程式导航实现路由跳转
        //...省略其他功能代码
        this.props.history.push('/home')
    }
    render(){
        return(
            <div>
                <p>登录页面：</p>
                <button onClick={this.handleLogin}>登录</button>
            </div>
        )
    }
}
const Home =(props)=>{
   const backLogin=()=>{
    //go(-1) 返回上一个页面
    props.history.go(-1)
    }
    return(
    <div>
        <h1>我是后台页面</h1>
        <button onClick={backLogin}>返回登录页面按钮</button>
    </div>
)
}

const App =()=>(
    <Router>
    <div>
        <h1>编程式导航</h1>
        <Link to='/login'>去登录页面</Link>
        {/* <br/>
        <Link to='/home'>去home页面</Link> */}
        <Route path="/login" component={Login}></Route>
        <Route path="/home" component={Home}></Route>
    </div>

    </Router>

)
ReactDOM.render(<App />,document.getElementById('root'))

5.默认路由

问题：现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？
默认路由：表示进入页面时就会匹配的路由
默认路由path为：/
<Route path="/" component={Home}></Route>

6.匹配模式

6.1 模糊匹配模式

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

6.2精确匹配

问题：默认路由任何情况下都会展示，如何避免这种问题？
给 Route 组件添加 exact 属性，让其变为 精确匹配模式
精确匹配：只有当 path 和 pathname 完全匹配时才会展示该路由
 <Route exact path="/" component={Home}></Route>
//推荐给默认路由添加 exact 属性

总结

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

12.React路由基础

原文：https://www.cnblogs.com/foreverLuckyStar/p/12256326.html