使用 react-router 还是 react-router-dom ？

React-router

React Router 包含3个库, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能，实际使用，我们不会直接安装 react-router,而是根据应用运行的环境选择安装 react-router-dom(在浏览器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依赖 react-router,所以在安装时， react-router 也会自动安装。
两者的关系
- react-router：提供 router 的核心api。如 Router、Route、Switch 等，没有提供有关dom操作进行路由跳转的api
- react-router-dom：提供 BrowserRouter、Route、Link等api，可以通过dom操作控制路由
- react-router-dom：基于 react-router，加入了在浏览器运行环境下的一些功能，例如：Link 组件，会渲染一个 a 标签，Link 组件源码a标签行; BrowserRouter和HashRouter 组件，前者使用 pushState 和 popState 事件构建路由，后者使用 window.location.hash 和 hashchange 事件构建路由。
- react-router-dom 里包含了 react-router 的依赖，因此只需要安装后者即可

使用

npm i react-router-dom
// or
yarn add react-router-dom

简易使用示例

新建一个 router/index.js 文件

//  router/index.js
import React from 'react'

// 引入一些模块
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'

//引入需要用到的页面组件 
import Home from './../views/home/home'
import About from './../views/about/about'

function router() {
  return (
    // Route 路由
    // Redirect 重定向
    <Router>
      <Route path="/home" component={Home} />
      <Route path="/" render={
        () => <Redirect to="/home" />}>
      </Route>
      <Route path="/about" component={About}></Route>
    </Router>
  )
}
export default router

home组件

//home.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom'

export default class Home extends Component {
  render() {
    // Link 路由跳转
    return (
      <div>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
        <h1>home</h1>
      </div>
    )
  }
}

about组件

//about.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom'

export default class About extends Component {
  render() {
    // Link 路由跳转
    return (
      <div>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
        <h1>about</h1>
      </div>
    )
  }
}

app.js中引入router

import React, { Component } from 'react';
import Router from './router'

export default class App extends Component  {
  render(){
    return (
      <div>
        <Router />
      </div>
    )
  }
}

嵌套路由

// about.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
export default class About extends Component {
  render() {
    return (
      // {this.props.children}  ==> 显示嵌套路由
      <div>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
        <h1>about</h1>
        {this.props.children}
      </div>
    )
  }
}

//  router/index.js
import React from 'react'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
import Home from './../views/home/home'
import About from './../views/about/about'
import somePage from './../views/somePage/somePage'
function router() {
  return (
    <Router>
      <Route path="/home" component={Home} />
      <Route path="/" render={
        () => <Redirect to="/home" />}>
      </Route>
      <Route path="/about" render={()=>(
          <About>
            <Route path="/about/somePage" component={somePage} />
          </About>
        )}>
      </Route>
    </Router>
  )
}
export default router