本文已参与「新人创作礼」活动，一起开启掘金创作之路。

React路由

1.React路由介绍

• 现代的前端应用大多是SPA（单页面程序），也就是只有一个Html页面的应用程序。因为他的用户体验更好、对服务器的压力更下，所以更受欢迎。为了有效的使用单页面来管理原来多页面的功能，前端路由应运而生。
• 前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
• 前端路由是一套映射规则，在React中，是URL路径与组件的对应关系

2.React路由的基本使用

• 安装：npm i react-router-dom

• 导入核心包: Router/Route/Link

  import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
  
  const First = () => (<p>页面1的内容</p>)
  
  // 使用Router组件包裹整个应用
  <Router>
  	<div className="App">
  		<Link to="/first">页面1</Link>
          <Route path="/first" component={First}></Route>
  	</div>    
  </Router>
  

• Router组件：包裹整个应用，一个React应用应该只有一个Router

• 两种常用的Router：HashRouter 和 BrowserRouter

  • HashRouter：使用URL的哈希值实现（localhost：3000/#/first）
  • BrowserRouter：使用H5的historyAPI实现（localhost：3000/first）

• 常用组件说明

  • Link组件：用于指定导航链接（a标签）

    // to属性：浏览器地址栏中pathname（location.pathname）
    <Link to="/first">页面1</Link>
    

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

    // path属性：路由规则
    // component属性：展示的组件
    // Route组件写在哪，渲染的组件就展示在哪
    <Route path="/first" component={First}></Route>
    

3.路由的执行过程

• 点击Link组件，修改浏览器的URL
• React路由监听地址栏URL变化
• React路由内部遍历Route组件，使用路由规则（path）与pathname进行匹配

4.编程式导航

• 通过js代码实现页面的跳转

  class Login extends React.Component{
      handleLogin=()=>{
          this.props.history.push('/home')
      }
      
      render(){
          
      }
  }
  

• push(path)：跳转到某个页面，参数path表示要跳转的路径

• go(n)：前进或后退到某个页面，参数n表示前进或后退页面数量（比如：-1表示后退到上一页）

5.默认路由

• 进入页面就会匹配的路由
• 默认路由path为：/

6.匹配模式

• 模糊匹配模式

  • 默认情况下，React路由是模糊匹配模式

  • 模糊匹配规则：只有pathname以path开头就会匹配成功

    <Link to="/Login">登录页面</Link>
    <Route path="/" component={Home} />匹配成功
    

    path	能够匹配的pathname
    /	所有pathname
    /home	/home 或 /home/...

• 精确匹配模式

  • 给Route组件添加exact属性，让其变成精确匹配模式

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