React路由

使用方法

使用步骤：

1. 安装： npm i react-router-dom
2. 导入路由的三个核心组件： Router / Route / Link
3. 使用 Router 组件包裹整个应用内容
4. 使用 Link 定义路由
5. 使用 Route 定义路由对应的组件

import React from 'react'
import ReactDOM from 'react-dom'
//1. 导入路由模块
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

class App extends React.Component{
  render(){
    return (
      <div>
      //定义RouterbaoguozhenggeReact
        <Router>
        //定义路由及对应组件
          <Link to="/show">show</Link>
          <Route path="/show" component={Show}></Route>
        </Router>
      </div>
    )
  }
}
class Show extends React.Component{
  render(){
    return (
      <div>
        我是show组件
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#app'))

使用组件

• Router 组件： 包裹整个应用，一个 react 应用只需要一个
  • 常用两种 Router： HashRouter 和 BrowserRouter
  • （推荐）BroswerRouter 使用 history API 实现 （localhost:3000/first）
    • import {BroswerRouter as Router, Route, Link } from 'react-router-dom'
  • HashRouter 的url地址中多了个 # (localhost:3000/#/first)
    • import {HashRouter as Router, Route, Link } from 'react-router-dom'
• Link 组件： 用于指定导航链接
  • Link 组件会被编译成 a 标签，to属性会被编译成 href 地址
• Route 组件： 定义 url 展示的组件，Route 写在哪里，组件就会被渲染到哪里

路由执行过程

1. 点击 Link 组件（a 标签）时会修改url地址栏中的 pathname
2. 路由监听到 url 地址变化之后，得到最新的 pathname，再遍历所以的 Route 组件。使用 pathname 和 Route 中的 path 进行比对，找到匹配的 Route
3. 找到 pathname 对应的 Route 之后，再找到 componet 对应的组件进行编译、渲染

默认路由

实现方式： 在 Route 组件配置path时，直接设置为 / 即可

<Router>
   <Route path="/" component={Login}></Route>
</Router>

这样当地址栏为localhost:3000/ 时，就能看到 login 页面

编程式导航

编程式导航就是通过 js 代码来进行跳转

• this.props.history.push( path )
  • path 是要跳转到的url地址
• this.props.history.go(n)
  • n: 前进或者后退几个页面

import React from 'react'
import ReactDOM from 'react-dom'
//1. 导入路由模块
import {BrowserRouter as Router, Route} from 'react-router-dom'

class App extends React.Component{
  render(){
    return (
        <Router>
          <Route path="/" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
        </Router>
    )
  }
}
class Register extends React.Component{
  quit = ()=>{
    this.props.history.go(-1)
  }
  render(){
    return (
      <div>
        这是注册界面
        <button onClick={this.quit}>退出</button>
      </div>
    )
  }
}
class Login extends React.Component{
  login=()=>{
    this.props.history.push('/register')
  }
  render () {
    return (
      <div>
        账号: <input type="text" /><br />
        密码: <input type="password" /><br />
        <button onClick={this.login}>登录</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector('#app'))

精确匹配

在上面的案例中，当我们点击登陆后，会跳转到注册界面，但是登陆界面的组件并未消失

原因： 默认情况下， React 使用的是 模糊匹配模式

模糊匹配规则： 只要 pathname 以 path 开头就能匹配成功

path	能够匹配的路由
/list	/list、 /list/a、 /list/1
/admin	/admin、 /admin/login、 /admin/home、/admin/userlist/a/b/c
/	匹配所有路由 / 、 /login 、 /home、 /admin/userlist …

解决方案： 使用精确路由
精确路由： 为Route 增加 exact 属性， 当使用了精确匹配时， path 和 pathname 必须完全一样才能跳转

 		<Router>
          <Route exact path="/" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
        </Router>