ReactRouter基础

ReactRouter基础

本质上react-router有三个模块，react-router、react-router-dom、react-router-native

在React项目中，路由实现需要使用react-router-dom模块

react-router安装

# npm
npm i --save react-router-dom

# yarn
yarn add react-router-dom

react-router的使用

我们需要在我们的项目中引入react-router-dom

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

BrowserRouter/HashRouter

如果我们要使用路由，那么应该在App.js中用BrowserRouter包着所有的代码

前者路由url中不带#，后者带#

BrowserRouter基于HTML5的pushState操作，HashRouter基于hash操作

一个页面只会有一个Router

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
function App () {
  return (
    <div className="app">
      <Router>
      
      </Router>
    </div>
  )
}

Route

每一个路由都放在一个Route里

<Router>
  <!-- 第一种写法 -->
  <Route path="路由路径">
    <Component a={1}></Component>
  </Route>
  <!-- 第二种写法 -->
  <Route path="路由路径" component={组件}></Route>
  <!-- 第三种写法 -->
  <Route path="路由路径" render={(props) => <Component {...props} a={1}></Component>}></Route>
</Router>

上面的三种方式区别在于组件内部的props的内容

function Page (props) {
  // 第一种方式 props中只能获取到我们添加到组件上的自定义属性
  // 第二种方式 props中包含了所有的路由信息 不包含自定义属性，也无法设置
  // 第三种方式 porps默认为空，可以添加自定义属性，如果想要有路由信息，需要我们设置对应props传递
  return (
    <div></div>
  )
}

exact

精确匹配，如果不添加该属性 path="/" 也会匹配到 /xxx，可以给Route添加该属性

<Route exact></Route>

Switch

如果Route的path和url匹配，则对应的Route的组件就会渲染，Switch控制了Route只能渲染匹配到的第一个。

<Router>
  <Switch>
    <Route path="路由路径">
      <Component></Component>
    </Route>
    <!-- 第二种写法 -->
    <Route path="路由路径" component={组件}></Route>
    <!-- 第三种写法 -->
    <Route path="路由路径" render={() => <Component></Component>}></Route>
  </Switch>
</Router>

Link

会被渲染成a标签，和vue的router-link相同

<Link to="path">链接名称</Link>

NavLink

和Link的区别在于NavLink会根据当前URL匹配对应的a标签添加类名 active

<NavLink to="path">链接名称</NavLink>

路由配置

如果想要像vue一样实现路由的配置，我们可以自己写配置，并根据配置渲染出对应的路由结构

安装 react-router-dom

安装 react-router-dom

yarn add react-router-config

配置好routes

const routes = [
  // 同级重定向
  {
    path: "/redirect",
    render: () => <Redirect to="/demo1"/>
  },
  {
    path: "/",
    exact: true,
    component: Index
  }, {
    path: "/demo1",
    component: Demo1,
    // 子路由配置
    routes: [
      {
        path: "/demo1/child1",
        component: Child1
      },
      // 重定向 父 -> 子
      {
        path: "/demo1",
        render: () => <Redirect to="/demo1/child1"/>
      }
    ]
  }
]

在App.js中添加函数

import { BrowserRouter as Router } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
import routes from '路由配置路径'

function App () {
  return (
    <div className="App">
      <Router>
        {renderRoutes(routes)}
      </Router>
    </div>
  )
}

找到有子路由的组件

import { renderRoutes } from 'react-router-config'
function 组件名 ({route}) {
  return (
    <div>
      {renderRoutes(route.routes)}
    </div>
  )
}

饿了么路由配置

- /shop
- /
  - /msite
  - /discover
  - /order
  - /profile