React 路由

路由的基本使用

React 路由中的一切都是组件，所以，如何使用 React 的组件，就如何使用 React 路由。

安装

yarn add react-router-dom

导入路由中的三个组件：Router / Route / Link

使用 Router 组件包裹整个应用；使用 Link 组件配置路由的入口，通过 to 属性来指定 pathname（也就是浏览器地址栏中的地址）；使用 Route 组件配置路由出口，path 属性：指定路由规则，component 属性：指定该路由规则匹配时要展示的组件

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

// 创建First组件
const First = () => <p>这是 First 组件的内容</p>
const Home = () => <div style={{ color: 'red' }}>这是 Home 组件</div>

class App extends React.Component {
  render() {
    return (
      // 3 使用 Router 组件包裹整个应用
      <Router>
        <div>
          <h1>使用 react 路由</h1>
          {/* 4 配置路由的入口（也就是一个导航菜单） */}
          <Link to="/first">页面一</Link>
          <br />
          <Link to="/home">首页</Link>

          {/* 5 配置路由的出口（配置路由规则和要展示的组件） */}
          <Route path="/first" component={First} />

          {/* 再创建另一外一个路由： */}
          <Route path="/home" component={Home} />
        </div>
      </Router>
    )
  }
}

React 路由使用的说明

Router 组件：整个应用使用一次即可！也就是用 Router 包裹整个应用

React 路由有两种模式：使用哈希值实现（hash）：HashRouter；使用 H5 中的 history API：BrowserRouter（推荐）

Link 组件：用来设置导航菜单，这个组件最终会被渲染成一个a 标签，to 属性：用来指定浏览器地址栏中的 哈希值 或者 pathname

Route 组件：用来设置路由规则，path 属性：配置路由规则，component 属性：指定要展示的组件

// H5 中的 history API (localhost:3000/first)
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

// 使用 哈希值（浏览器地址栏中的 #/） 来实现路由： (localhost:3000/#/first)
import { HashRouter as Router, Route, Link } from 'react-router-dom'

路由的执行过程

点击 Link 组件(a标签)，修改了浏览器地址栏中的 url。React 路由监听到地址栏 url 的变化。React 路由内部遍历所有 Route 组件，使用路由规则( path )与 pathname 进行匹配。当路由规则(path)能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。

编程式导航

编程式导航：可以通过 JS 代码的方式，来实现路由跳转。组件中通过 props 来获取到路由信息，push(path)：跳转到参数中指定的路由地址；go(n)：前进（1）或后退（-1）；goBack() 返回；replace(pathname,{args,...}) 跳转到 pathname 对应的路由页面，并携带数据 args

const First = props => {
  const handleClick = () => {
    // push 方法用来实现路由的跳转
    // 参数：表示要跳转到的路由的路径
    props.history.push('/login')
  }

  return (
    <p>
      这是 First 组件的内容
      <button onClick={handleClick}>跳转到登录页面</button>
    </p>
  )
}

默认路由

默认路由地址为：/。默认路由，在进入页面时，就会被匹配

const Home = () => <p>这是首页，进入页面时，就会展示该组件内容</p>
<Route path="/" component={Home} />

路由匹配规则

默认情况下，路由是模糊匹配的。也就是说：只要 pathname 是以 path 开头，那么， 这个路由规则就会匹配成功。比如：pathname 是 /first，path 是 /，此时，pathname 是以 / 开头的，所以，此时，这个路由规则就被匹配了，也就是 会展示该规则对应的组件

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

精确匹配

给 Route 添加 exact 属性，就会让当前路由规则变为精确匹配。此时，只有当 pathname 和 path 完全匹配时，才会展示该组件。

// 精确匹配：
// pathname 是 '/first'，path 是 '/'，此时，就不会匹配了
// 只有当 pathname 是 '/' 并且 path 也是 '/' ，此时才会匹配
<Route exact path="/" component={Home} />

更多详细内容 → 见官方文档