d3React路由

使用步骤

• 安装： yarn add react-router-dom
  • 如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn
• 导入路由的三个核心组件： Router / Route / Link

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

• 使用Router 组件包裹整个应用

• 使用Link组件作为导航菜单（路由入口）

• 使用Route组件配置路由规则和要展示的组件（路由出口）

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

class App extends React.Component{
    render(){
        return(
            <Router>
                    <div className="App">
                        <Link to="/first">页面一</Link><hr />
                        <Link to="/2">页面2</Link><hr />
                        <Link to="/3">页面3</Link>
                        <Route path="/first" component={First}></Route>
                        <Route path="/2" component={Second}></Route>
                        <Route path="/3" component={Third}></Route>
                    </div>
            </Router>

        
        )
    }
}
// 回调函数
const First=()=><p>页面一的内容</p>
// 类
class Second extends React.Component{
    render(){
        return (
            <p>页面二的内容</p>
        )
    }
}
// 函数
function Third() {
    return (<p>页面三的内容</p>)    
}


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

常用组件说明

• Router组件：包裹整个应用，一个React应用只需要使用一次
  • 两种常用的Router： HashRouter和BrowserRouter
  • HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
  • 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
• Link组件：用于指定导航链接（a标签）
  • 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
• Route组件：指定路由展示组件相关信息
  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  • component属性：展示的组件
  • Route写在哪，渲染出来的组件就在哪

路由的执行过程

• 当我们点击Link组件的时候，修改了浏览器地址栏中的url

• React路由监听地址栏url的变化

• React路由内部遍历所有的Route组件，拿着Route里面path规则与pathname进行匹配

• 当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容

编程式导航

• 场景：点击登陆按钮，登陆成功后，通过代码跳转到后台首页，如何实现？
• 编程式导航：通过JS代码来实现页面跳转
• history是React路由提供的，用于获取浏览器历史记录的相关信息
• push(path)：跳转到某个页面，参数path表示要跳转的路径
• go(n)：前进或后退功能，参数n表示前进或后退页面数量

默认路由

• 现在的路由都是通过点击导航菜单后展示的，如果进入页面的时候就主动触发路由呢
• 默认路由：表示进入页面时就会匹配的路由
• 默认路由：只需要把path设置为 ‘/’

匹配模式

模糊匹配模式

• 当Link组件的to属性值为 ‘/login’ 时候，为什么默认路由也被匹配成功？
• 默认情况下，React路由是模糊匹配模式
• 模糊匹配规则：只要pathname以path开头就会匹配成功

精准匹配

• 默认路由认可情况下都会展示，如果避免这种问题？
• 给Route组件添加exact属性，让其变为精准匹配模式
• 精确匹配：只有当path和pathname完全匹配时才会展示改路由

小结

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