今天天氣很好，趕到公司也是熱的汗流浹背...

react-router 與 react-router-dom的關(guān)系

react-router-dom與react-router為主分支關(guān)系，react-router v4之后，分為了幾個(gè)獨(dú)立的包

• react-router React Router 核心
• react-router-dom 用于 DOM 綁定的 React Router
• react-router-native 用于 React Native 的 React Router
• react-router-redux React Router 和 Redux 的集成
• react-router-config 靜態(tài)路由配置的小助手

react-router-dom依賴于react-router，大多組件都只是從react-router中引入然后直接導(dǎo)出，不同的就是多了 <Link> <BrowserRouter>組件。所以web應(yīng)用只需要引入react-router或者react-router-dom一項(xiàng)即可。

主要組件

1. Router

• <BrowserRouter>
  使用h5 history API（ pushState，replaceState和popstate事件），讓UI與URL同步。

• <HashRouter>
  使用URL（即window.location.hash）的哈希部分來保持UI與URL同步。因?yàn)槠鋒istory不支持location.key或location.state，推薦使用<BrowserRouter>代替。

• <MemoryRouter>
  在內(nèi)存中維護(hù)history中的“URL”，不讀取或?qū)懭氲降刂窓凇Ｔ跍y試和非瀏覽器環(huán)境（如React Native）中很有用。

• <NativeRouter>
  適用于React Native的一個(gè)路由器

• <StaticRouter>
  不可改變其location的一個(gè)Router，主要適用于服務(wù)器渲染。

2. Switch

保證只渲染第一個(gè)匹配location的組件，上代碼

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

上述Route節(jié)點(diǎn)，如果訪問/about路徑，則About,User,NoMatch三個(gè)組件都將被渲染，因?yàn)槿齻€(gè)path都被匹配成功，可能這并不是你想要的結(jié)果。如果包裹Switch組件，則只會(huì)渲染第一個(gè)匹配的組件About。

<Switch>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

3. Route

負(fù)責(zé)location匹配及組件渲染的組件，通常作為Switch或者Router子組件。參數(shù)包括exact ,path, component, render, children，三個(gè)渲染方法中(component, render, children)只能選擇一個(gè)，大多數(shù)情況都只是使用component就夠了。

4. Link

一個(gè)文本導(dǎo)航組件，跟<a>標(biāo)簽有點(diǎn)類似，不過是路由跳轉(zhuǎn)。

<Link to="/about">About</Link>

點(diǎn)擊About就會(huì)直接跳到/about路徑。

< NavLink >一個(gè)特殊版本<Link>，它將在與當(dāng)前URL匹配時(shí)為渲染元素添加樣式屬性。

直接傳入className

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

或者直接傳入style樣式

<NavLink
  to="/faq"
  activeStyle={{fontWeight: "bold",color: "red" }}
>
  FAQs
</NavLink>

5. Redirect

路由重定向組件

<Redirect exact from="/" to="/dashboard" />

from為匹配的路徑，如果匹配成功，不會(huì)加載組件，而是重定向到to指定的路徑。exact表示路徑需要完全匹配。

實(shí)例

1、創(chuàng)建一個(gè)路由配置routerConfig，用來集中管理多個(gè)路由組件及屬性。

const routerConfig = [
  {
    path: '/',
    exact:true,
    component: Startup
  },
  {
    path: '/main',
    component: App
  },
  {
    path: '/welcome',
    component: Welcome
  }
];

2、自定義一個(gè)AppRouter組件，解析routerConfig，創(chuàng)建Route等組件

import React, { Component } from 'react';
import { Switch, Route, MemoryRouter } from 'react-router-dom';
import routerConfig from '../../routerConfig';

class AppRouter extends Component {
  /**
   * 渲染路由組件
   */
  renderNormalRoute = (item, index) => {
    return item.component ? (
      <Route
        key={index}
        path={item.path}
        component={item.component}
        exact={item.exact}
      />
    ) : null;
  };

  render() {
    return (
      <MemoryRouter>
      <Switch>
        {/* 渲染路由表 */}
        {routerConfig.map(this.renderNormalRoute)}

        {/* 首頁默認(rèn)重定向到 /dashboard */}
        {/*<Redirect exact from="/" to="/dashboard" />*/}

      </Switch>
      </MemoryRouter>
    );
  }
}

export default AppRouter;

因?yàn)槟壳笆且苿?dòng)端app路由，所以使用的是MemoryRouter，基本也用不上Redirect。這里也可以再封裝一層，寫一些固定布局，不隨路由變化的布局。

3、最后再render AppRouter組件

ReactDOM.render(
    <AppRouter />,
  ICE_CONTAINER
);

4、在頁面中使用

import {withRouter} from 'react-router-dom';

@withRouter
class Startup extends Component {
    // .....
}

使用withRouter注入相關(guān)類中，直接調(diào)用類屬性中的history.push方法就可直接跳轉(zhuǎn)路由

this.props.history.push("/main");

允許帶入?yún)?shù)

this.props.history.push("/main", {type:1});

或者直接寫入路徑中

this.props.history.push("/main?type=1");

至此，就簡單的集成了react-router-dom。

關(guān)于react-router，其實(shí)還有很多很多沒有寫，但是呢，日記就先寫到這里，想太多一天也寫不完，就只是簡單記錄下個(gè)人理解及代碼過程。end...