React-router v4 路由配置方法

React-Router v4

一. Switch 、Router 、Route三者的區別

一、Route

Route 是創建location 和 ui的最直接聯繫

二、Router

react-router v4 中，Router被拆分紅了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。

MemoryRouter、BrowserRouter、HashRouter 等於

import { Router } from 'react-router'
<!--這裏能夠有三種-->
<!--history 部分源碼
exports.createBrowserHistory = _createBrowserHistory3.default;
exports.createHashHistory = _createHashHistory3.default;
exports.createMemoryHistory = _createMemoryHistory3.default;
-->
import createBrowserHistory from 'history/createBrowserHistory'
//
const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

NativeRouter（給rn使用的）

A <Router> for iOS and Android apps built using React Native.

這裏新增strict 和 exact

使用了strict location 大於等於path才能匹配,eq path='/one' location='/one/a'能匹配。

使用了exact location 約等於 path 才能匹配,eq path='/one' location='/one'或者 '/one/'能匹配，因此說是約等於。

使用了exact 和 strict location = path才能匹配

StaticRouter(後續補充）

三、Switch

這是v4版本中新添加，主要用來作惟一匹配的功能。就是想要在衆多路由中只匹配其中一個路由。

2、v4 版本中路由應該如何配置呢？

1.基本配置（這個和v3中基本一致，效果也基本同樣）

匹配 <= location eq.( /b => / + /b ) ( / => / )

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
      <div>
         <Route path="/" component={aContainer} />
         <Route path="/b" component={bContainer} />
      </div>
    </BrowserRouter>

2.含Switch 配置

匹配 <= location eq.( /b => /b ) ( / => / ) 惟一匹配

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
      <Switch>
              //這裏用exact，僅僅是擔憂location被 path='/'截胡了。
         <Route exact path="/" component={aContainer} />
         <Route path="/b" component={bContainer} />
      </Switch>
    </BrowserRouter>

問題（三個問題）

1.如何設置公共的Component

第一種方式

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
      <div>
         <Route path="/" component={aContainer} />
         <Route path="/b" component={bContainer} />
      </div>
    </BrowserRouter>

第二種方式(父子嵌套)

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
      <div >
        <Route path="/" component={aContainer} />
        <Route path="/b" component={Parent} />
        {/* {app()} */}
      </div>
    </BrowserRouter>

---

const Parent = ({ match }) => (
  <div>
    <Route path={`${match.url}/`} component={bContainer} />
    <Route path={`${match.url}/c`} component={cContainer} />
    <Route path={`${match.url}/d`} component={dContainer} />
  </div>
);

這種狀況 bContainer就是是公用的Component

2.如何設置getComponent，按需加載

另外一篇文章

3.是否有簡化寫法

npm install --save react-router-config

第一步 配置路由

const routes = [
  { component: bContainer,
    routes: [
      { path: '/',
        exact: true,
        component: bContainer
      },
      { path: '/b/b',
        component: bContainer,
        routes: [
          { path: '/b/b/b',
            component: bContainer
          }
        ]
      }
    ]
  }
]

第二步 設置路由

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
      <div >
          {renderRoutes(routes)}
      </div>
 </BrowserRouter>

第三步 須要在container的render中去調用方法

<div>
  1111
  {renderRoutes(this.props.route.routes)}
</div>

這個優點是能夠統一配置，劣勢是須要在container中統一調用，可是這個抽出來統一實現，問題也不大，而且還能夠解決 問題一。

這個renderRoutes實際是就是用一層Switch和多個Route來包了一層。