react-router简单整理总结

一、react-router与react-router-dom区别

• react-router: 实现了路由的核心功能
• react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

从源码可以看出react-router-dom是依赖于react-router的，其中Switch、Route、Router、Redirect等组件是直接引入react-router中的

export { Switch, Route, Router, Redirect } from 'react-router'

除此之外，react-router-dom还另外新增了Link、BrowserRouter、HashRouter组件。

因此，在引入react-router-dom后不需要显性引入react-router，react-router-dom依赖react-router，npm都会将他们安装。

react-router-dom配置路由：

// App.js
import React from 'react'
import { NavLink, Route, HashRouter, Redirect } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Repos from './Repos'

export default class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <div>
          <ul>
            <li><NavLink to='/About' activeClassName="active">About</NavLink></li>
            <li><NavLink to='/Repos' activeClassName="active">Repos</NavLink></li>
          </ul>
          <Route exact path='/' component={Home} /> // 指定默认路由，用Redirect组件也可以实现
          <Route path='/About' component={About}></Route>
          <Route path='/Repos' component={Repos}></Route>
        </div>
      </HashRouter>
    )
  }
}

注意：Route组件必须由Router、HashRouter、BrowserRouter组件包裹

二、React-router

在React-router4.0的代码库中，根据使用场景包含了以下几个独立的包：

• react-router : react-router4.0的核心代码
• react-router-dom : 构建网页应用，存在DOM对象场景下的核心包
• react-router-native : 适用于构建react-native应用
• react-router-config : 配置静态路由
• react-router-redux : 结合redux来配置路由，已废弃，不推荐使用。

所提供的API都是以组件的形式给出。

比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。

1.路由组件 BrowserRouter 和 HashRouter

BrowserRouter（history模式） 和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。

history 模式：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
          <Header />
          <Route path='/' ex