Coding-everyday

# 1. React-Router

# 1.1. BrowserRouter和HashRouter

  • <BrowserRouter>使用HTML5提供的history API (pushState,replaceState和 popstate 事件) 来保持 UI 和 URL 的同步。

  • <HashRouter>使用 URL 的hash部分（即 window.location.hash）来保持 UI 和 URL 的同步。

一般就这两种，用它包裹住<Route/>

Switch当第一个路由匹配成功后，就不再往下走了

# 1.2. 混合组件化

就是路由当组件使用。

  • 3.0版本是<Router history=''>
  • 4.0是<HashRouter></HashRouter>

注意：

  • 一个HashRouter只能有一个子节点，不能有多个。
  • <Route/>标签中的component一定是小写。
  • 根标签必须是Router(BrowserRouter或HashRouter)，否则没法跳转。
  • 路由匹配不到有两种处理方式，一是404，二是跳转到默认的首页。

# 1.3. 实现404

必须使用switch，写一个不带path的Route放在所有Route的最后，component就是404页面

<Switch>
    <Route path='/about' component={About} />
    <Route path='/main' component={Main} />
    <Route component={notMatch} />
</Switch>

← redux →