使用react-router-dom做移动端路由|使用react-router-dom做移动端路由 2019-08-12 使用react-router-dom做移动端路由

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

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中引入然后直接导出，不同的就是多了组件。所以web应用只需要引入react-router或者react-router-dom一项即可。
主要组件 1. Router

使用h5 history API（ pushState，replaceState和popstate事件），让UI与URL同步。
使用URL（即window.location.hash）的哈希部分来保持UI与URL同步。因为其history不支持location.key或location.state，推荐使用代替。
在内存中维护history中的“URL”，不读取或写入到地址栏。在测试和非浏览器环境（如React Native）中很有用。
适用于React Native的一个路由器
不可改变其location的一个Router，主要适用于服务器渲染。

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

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

3. Route 负责location匹配及组件渲染的组件，通常作为Switch或者Router子组件。参数包括exact ,path, component, render, children，三个渲染方法中(component, render, children)只能选择一个，大多数情况都只是使用component就够了。
4. Link 一个文本导航组件，跟标签有点类似，不过是路由跳转。

About

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

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

直接传入className

FAQs

或者直接传入style样式

FAQs

5. Redirect 路由重定向组件

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 ? ( ) : null; }; render() { return ( {/* 渲染路由表 */} {routerConfig.map(this.renderNormalRoute)}{/* 首页默认重定向到 /dashboard */} {/**/} ); } }export default AppRouter;

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

ReactDOM.render( , 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-dom做移动端路由|使用react-router-dom做移动端路由 2019-08-12】关于react-router，其实还有很多很多没有写，但是呢，日记就先写到这里，想太多一天也写不完，就只是简单记录下个人理解及代码过程。end...