React Router基本技术点

React Router中有三种类型的组件：路由器组件、路由匹配组件、导航组件。

1、路由器组件（BrowserRouter、HashRouter）

这两个都是创建一个专门的history对象。

2、路由匹配组件（Route、Switch）

路由匹配一个由<Route>的path到当前位置的pathname。当<Route>匹配时它将呈现其内容，当它不匹配时，它将呈现null。

<Switch>组件用于将<Route>组合在一起。

当<Switch>不需要分组<Route>时， <Switch>将迭代其所有子<Route>元素，并仅渲染与当前位置匹配的第一个子元素。

当出现多个路径名相同的路径时，路由之间的转换，以及识别没有路径时。

3、导航组件（Link、NavLink、Redirect）

<Link>组件来用来编译呈现 a 标签。

<NavLink>是一种特殊类型。用于当前路由与to地址相同时。

<Redirect>强制导航（重定向）。

Api：

1、<BrowserRouter>

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter>

        <App/>

</BrowserRouter>

2、<HashRouter>

3、<Link>

4、<NavLink>

5、<MemoryRouter>

6、<Redirect>

7、<Route>

8、<Router>

import { Router } from "react-router";

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

<Router history={ history }>

    <App/>

</Router>

9、<StaticRouter>

10、<Switch>

11、matchPath()

在<Route>正常渲染周期之外使用的相同匹配代码，例如在服务器上呈现之前收集数据依赖性。

@pathname：第一个参数，用于监听地址；

@props：第二个参数，与Route相同；

@returns：返回一个对象

import { matchPath } from "react-router";

const match = matchPath("/users/123", {

        path: "/users/:id",

        exact: true,

        strict: false

});

12、withRouter()

使用它，可以通过this.props.history访问到该组件。

class order extends React.Component {}

const orderRouter = withRouter(order);

this.props:

1、.history

2、.location

3、.match