08react基础-路由

React路由介绍

现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。

• 前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）
• 前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
• 使用React路由简单来说，就是配置路径和组件

路由的基本使用

使用步骤

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

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

• 3. 使用 Router 组件包裹整个应用（重要）

<Router>
  <div className="App">
      // … 省略页面内容
  </div>
</Router>

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

<Link to="/first">页面一</Link>

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

const First = () => <p>页面一的页面内容</p>
<Router>
   <div className="App">
     <Link to="/first">页面一</Link>
     <Route path="/first" component={First}></Route>
   </div>
</Router>

常用组件说明

• Router组件：包裹整个应用，一个React应用只需要使用一次
  • 两种常用的Router： HashRouter和BrowserRouter
  • HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
  • 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
• Link组件：用于指定导航链接（a标签）
  • 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性

<Link to="/first">页面一</Link>

• Route组件：指定路由展示组件相关信息
  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  • component属性：展示的组件
  • Route写在哪，渲染出来的组件就在哪

<Route path="/first" component={First}></Route>

路由的执行过程

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

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

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

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

编程式导航

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

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  编程式导航
*/

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 handleBack = () => {
    // go(-1) 表示返回上一个页面
    props.history.go(-1)
  }
  return (
    <div>
      <h2>我是后台首页</h2>
      <button onClick={handleBack}>返回登录页面按钮</button>
    </div>
  )
}

const App = () => (
  <Router>
    <div>
      <h1>编程式导航：</h1>
      <Link to="/login">去登录页面</Link>

      <Route path="/login" component={Login} />
      <Route path="/home" component={Home} />
    </div>
  </Router>
)

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

默认路由

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

<Route path="/" component={Home} />

匹配模式

1.模糊匹配模式

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

path 代表Route组件的path属性
pathname 代表Link组件的to属性（也就是 location.pathname）

image.png

精准匹配

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

// 此时，该组件只能匹配 pathname=“/” 这一种情况
<Route exact path="/" component=... />

案例：

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  模糊匹配模式
*/

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

const Home = () => <p>进入页面的时候，你能看到我吗？</p>
const Login = () => <p>我是Login组件的内容</p>

const App = () => (
  <Router>
    <div>
      <h1>默认路由</h1>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/login">登录页面</Link>
        </li>
      </ul>

      {/* 默认路由，添加 exact 属性，就会让当前路由变为精确匹配 */}
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
)

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