使用react-router-dom做移動(dòng)端路由 2019-08-12

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

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

react-router-domreact-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ū)懭氲降刂窓凇T跍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...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容