React-Router 路由基本使用

React-router

BrowserRouter

不带#号的地址栏路径。 监听组件中路由的改变：

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
  ,document.getElementById('root')
);

在主文件中，包裹app组件，进行监听所有组件路由的更新。

Like

react中的 a标签形式。用于跳转路由路径。

<Like to="路径" />

to: 跳转的路径
component：映射的组件

Route

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

Switch

路由只匹配一次。匹配到之后就不继续往下匹配了。
Route 用 Switch包裹。多个Route就包上

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

如：

<Switch>
    <Route path="/login" component={Login}></Route>
    <Route path="/workbench" component={Workbench}></Route>
</Switch>

模糊匹配

<Like to="/home/a/b"></Like >
//可以匹配到
<Route path="/home" component={Home}></Route>

匹配原则： 拿出 home ，a，b 依次匹配，第一个不是home就不匹配后面的。
如果第一个匹配成功，直接匹配成功

精准匹配

exact={true}

<Route exact={true} path="/login" component={Login}></Route>

路由重定向 – Redirect

写在路由 Route的最下方

用法：

<Switch>
    <Route exact={true} path="/login" component={Login}></Route>
    <Route path="/workbench" component={Workbench}></Route>
    <Redirect from="/" to="/workbench"></Redirect> 
</Switch>

-------------------------- end -----------------------------