1、 <BrowserRouter>
basename: string。所有链接的基础路径
getUserConfirmation:: func。
keyLength：number。默认6，决定location.key
forceRefresh: boolean。
children: node
2、<Link>
to: string | obejct | func。要链接的位置，如
'courses?sort=name'
或
{
pathname: '/courses', //表示要链接到的路径
search: '?sort=name', //查询参数
hash: '#this-hash', //url的哈希
state: { fromDashboard: true }, //保留位置的状态信息
}
或
location => ({...location, pathname: '/courses'})
函数可以返回字符串或者对象形式。
replace: boolean。如果为true，单击该链接将替换历史记录堆栈中的当前条目，而不是添加新条目
<Link to="/courses" replace />
innerRef: func | RefObject。允许访问组件的ref
const refCallback = node => {
// `node` refers to the mounted DOM element or null when unmounted
}
<Link to="/" innerRef={refCallback} />
const anchorRef = React.createRef()
<Link to="/" innerRef={anchorRef} />
3、<NavLink>
<Link>的一个特殊版本，新加元素样式属性
activeClassName: string。
activeStyle: string。
exact: boolean。精确匹配
strict: boolean。尾随/
isActive: func。用于添加额外逻辑，判断链接是否处于激活状态。
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>
Event 123
</NavLink>
location: object。
aria-current: string。 可使用的值有
page默认值
step
location
date
time
true
4、<MemoryRouter>
将URL的历史记录保存在Router的内存中
initialEntries: array。历史记录栈
initialIndex: number。
<MemoryRouter
initialEntries={["/one", "/two", { pathname: "/three" }]}
initialIndex={1}
>
<App />
</MemoryRouter>
getUserConfigrmation: func。
keyLength: number。
children: node
5、<Redirect>
重定向到新位置，新位置将覆盖历史记录堆栈中的当前位置。
to: string | object
push: bool。如果为true，重定向会将新条目推送到历史记录中，而不是替换当前条目。
from: string。
exact: bool。是否完全匹配
strict： bool。是否严格匹配
sensitive: bool。是否区分大小写
6、<Route>
当位置匹配了路由的路径，呈现UI
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
<div>
<Route exact path="/" component={Home}/>
<Route path="/news" component={NewsFeed}/>
</div>
</Router>
<div>
<Home/>
<!-- react-empty: 2 -->
</div>
<div>
<!-- react-empty: 1 -->
<NewsFeed/>
</div>
UI呈现的方式有三种：component、render、children。每一种都传递props都包含些属性：match、location、history。
component: 如果为组件道具提供内联函数，则每次渲染都会创建一个新组件。这将导致现有组件卸载和新组件安装，而不是仅更新现有组件。
render: func
children: func
注：优先级：component > render > children，不要同时使用多种
path: string | string[]。没有路径的路由始终匹配
<Route path={["/users/:id", "/profile/:id"]} component={User} />
exact: bool。如果为 true，则仅当path路径与location.pathname位置精确匹配时才会匹配。
strict: bool
location: object
sensitive: bool
7、<Router>
所有路由器组件的通用低级接口。通常，应用将使用一个高级路由器:<BrowserRouter>、 <HashRouter>、<MemoryRouter>、<NaticeRouter>、<StaticRouter>
history: object
children: node
import { Router } from "react-router";
import { createBrowserHistory } from "history";
const history = createBrowserHistory()
<Router history={history}>
<App/>
</Router>
8、<StaticRouter>
从不更改位置的路由。这在服务器端呈现方案中非常有用，因为用户实际上没有单击，因此位置永远不会实际更改。因此，名称：静态。当您只需要插入位置并在渲染输出上进行断言时，在简单测试中也很有用。
basename: string。
location: string | object。
context: object。
children: node。
9、<Switch>
当匹配找到第一个匹配的，就不往下匹配了
location: object
children: node
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
<Redirect from="/accounts" to="/users" />
<Route component={NoMatch} />
</Switch>
10、match
match对象包含有关<Route path>如何匹配URL的信息。如果Route 没有路径，因此始终匹配，您将获得最接近的父匹配项。与Router相同
match = {
path: "/:id"
url: "/modus-create"
isExact: true
params: {
id: "/modus-create"，
...
}
}
//用处
Route component this.props.match
Route render ({ match }) => ()
Route children as ({ match }) => ()
withRouter as this.props.match
matchPath as the return value
11、matchPath方法
matchPath(pathname, {path, strict, exact}): match | null
12、location
location = {
pathname: "/modus-create"
search: ""
hash: ""
state: undefined
key: "q9zhdetr56j"
}
//用法
Route component as this.props.location
Route render as ({ location }) => ()
Route children as ({ location }) => ()
withRouter as this.props.location
13、history
history = {
length: 2
action: "PUSH"
location: Object
createHref: function createHref() {}
push: function push() {}
replace: function replace() {}
go: function go() {}
goBack: function goBack() {}
goForward: function goForward() {}
block: function block() {}
listen: function listen() {}
}
14、withRouter
作用把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上
