React Router V4 系列专栏（一）

不知不觉，React Router 已经引来了 Version 4。对于前端的开源技术产品，每次框架/库的升级总是不免给开发的小伙伴带来一次阵痛，享受新的功能特性的同时，也还的花时间和精力去学习和适应。

新版概述

就package而言，这次 React Router 一分为三，跟React之前升级的套路是一样的。

react-router-dom
react-router-native	
react-router

升级的理念

• 声明式 Declarative
• 可组合 Composability

新的React Router 从 React 汲取了很多思想和理念，它所提供的路由都可以看成是一个组件。所以，如果你会react，那么你就了解React Router，他们的核心是一样的。

安装和下载

最新正式的V4还没有发布，可以通过以下方式获取安装：

$ npm install --save react-router@next

然后继续以我们熟悉的方式引入：

// using ES6 modules
import { Router, Route, Switch } from 'react-router'

// using CommonJS modules
var Router = require('react-router').Router
var Route = require('react-router').Route
var Switch = require('react-router').Switch

Web

npm install react-router-dom@next
# or
yarn add react-router-dom@next

引入使用

import {
  BrowserRouter as Router,
  StaticRouter, // for server rendering
  Route,
  Link
  // etc.
} from 'react-router-dom'

Native

yarn add react-router-native@next
# or if not using the react-native cli
npm install react-router-native@next

引入使用

import {
  NativeRouter as Router,
  DeepLinking,
  AndroidBackButton,
  Link,
  Route
  // etc.
} from 'react-router-native'

快速上手使用

create-react-app

使用 create-react-app快速初始化我们的应用。

sudo npm install create-react-app -g
create-react-app router-demo
cd router-demo && yarn 
yarn start

（以上我使用的是 yarn 安装项目依赖，主要是快而且管理方便）

示例代码

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)


const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

const Topics = ({ match }) => {
  console.log( match )
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li><Link to={`${match.url}/rendering`}>Rendering with React</Link></li>
        <li><Link to={`${match.url}/components`}>Components</Link></li>
        <li><Link to={`${match.url}/props-v-state`}>Props v. State</Link></li>
      </ul>

      <Route path={`${match.url}/:topicId`} component={Topic}/>
      <Route exact path={match.url} render={() => (
        <h3>Please select a topic.</h3>
      )}/>
    </div>
  )
}

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)


export default BasicExample