使用react-router-dom做移动端路由 2019-0

今天天气很好，赶到公司也是热的汗流浃背...

react-router 与 react-router-dom的关系

react-router-dom与react-router为主分支关系，react-router v4之后，分为了几个独立的包

• 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 静态路由配置的小助手

react-router-dom依赖于react-router，大多组件都只是从react-router中引入然后直接导出，不同的就是多了 <Link> <BrowserRouter>组件。所以web应用只需要引入react-router或者react-router-dom一项即可。

主要组件

1. Router

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

• <HashRouter>
  使用URL（即window.location.hash）的哈希部分来保持UI与URL同步。因为其history不支持location.key或location.state，推荐使用<BrowserRouter>代替。

• <MemoryRouter>
  在内存中维护history中的“URL”，不读取或写入到地址栏。在测试和非浏览器环境（如React Native）中很有用。

• <NativeRouter>
  适用于React Native的一个路由器

• <StaticRouter>
  不可改变其location的一个Router，主要适用于服务器渲染。

2. Switch

保证只渲染第一个匹配location的组件，上代码

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

上述Route节点，如果访问/about路径，则About,User,NoMatch三个组件都将被渲染，因为三个path都被匹配成功，可能这并不是你想要的结果。如果包裹Switch组件，则只会渲染第一个匹配的组件About。

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

3. Route

负责location匹配及组件渲染的组件，通常作为Switch或者Router子组件。参数包括exact ,path, component, render, children，三个渲染方法中(component, render, children)只能选择一个，大多数情况都只是使用component就够了。

4. Link

一个文本导航组件，跟<a>标签有点类似，不过是路由跳转。

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

点击About就会直接跳到/about路径。

< NavLink >一个特殊版本<Link>，它将在与当前URL匹配时为渲染元素添加样式属性。

直接传入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为匹配的路径，如果匹配成功，不会加载组件，而是重定向到to指定的路径。exact表示路径需要完全匹配。

实例

1、创建一个路由配置routerConfig，用来集中管理多个路由组件及属性。

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

2、自定义一个AppRouter组件，解析routerConfig，创建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)}

        {/* 首页默认重定向到 /dashboard */}
        {/*<Redirect exact from="/" to="/dashboard" />*/}

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

export default AppRouter;

因为目前是移动端app路由，所以使用的是MemoryRouter，基本也用不上Redirect。这里也可以再封装一层，写一些固定布局，不随路由变化的布局。

3、最后再render AppRouter组件

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

4、在页面中使用

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

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

使用withRouter注入相关类中，直接调用类属性中的history.push方法就可直接跳转路由

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

允许带入参数

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

或者直接写入路径中

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

至此，就简单的集成了react-router-dom。

关于react-router，其实还有很多很多没有写，但是呢，日记就先写到这里，想太多一天也写不完，就只是简单记录下个人理解及代码过程。end...