React-Router 入门知识

v4版本

相对于v2,v3版本，v4一个最大的变化是路由从静态改为了动态，就是说用v4开发不需要专门再写一个类似route.js的文件来专门存放路由与组件的对应的关系，用v4直接写在Route组件的path上就行。此外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即可，做RN的话需要引入react-router-native，同时如果使用了redux，还必须引入react-router-redux

0、重要概念

• Route
  Route就是一个组件，当路径匹配时就渲染，否则渲染为null;
  Route的path参数可以设正则，例如 path='/(index|home|)' 可以匹配/index或/home或/; 再如 path='/list/:number'可匹配/list/1，注意number不能改其他名字
  Route对应的组件可以从props中获取 match , location , history 三个参数：

// 取参数写法：
cons { dispatch, match:{ params:{ number } } } = this.props
// match 参数
params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
isExact - true if the entire URL was matched (no trailing characters)
path - (string) The path pattern used to match. Useful for building nested <Route>s
url - (string) The matched portion of the URL. Useful for building nested <Link>s
// location 参数（Link的to参数可以是location对象）
const location = {
  pathname: '/somewhere'
  state: { fromDashboard: true }
}
<Link to={location}/>
{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

// history 参数
`length` - (number) The number of entries in the history stack
`action` - (string) The current action (`PUSH`, `REPLACE`, or `POP`)
`location` - (object) The current location. May have the following properties:（这个location和上面那个不一样）
         `pathname` - (string) The path of the URL
         `search` - (string) The URL query string
         `hash` - (string) The URL hash fragment
         `state` - (string) location-specific state that was provided to e.g. `push(path, state)` when this location was pushed onto the 
                  stack. Only available in browser and memory history.
`push(path, [state])` - (function) Pushes a new entry onto the history stack
`replace(path, [state])` - (function) Replaces the current entry on the history stack
`go(n)` - (function) Moves the pointer in the history stack by `n` entries
`goBack()` - (function) Equivalent to `go(-1)`
`goForward()` - (function) Equivalent to `go(1)`
`block(prompt)` - (function) Prevents navigation (see [the history docs](https://github.com/ReactTraining/history#blocking-transitions))

• Link
  可设置to和replace属性
• NavLink
  特殊的Link，当激活时会自动加上active类名
• Prompt
  页面离开时的弹出提示框
• Redirect
  可设置 from 和 to 属性 ，当 Link 用即可

• 1、基本使用

import React, { Component } 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 }) => (         // 函数式组件，每个组件会被传入match、location 和 history，用的最多的是match
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)
const Topics = ({ match }) => (
  <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>
)
class App extends Component {
  render() {
    return (
      <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}/>             //exact表示精准匹配，/about不会渲染Home
          <Route path="/about" component={About}/>
          <Route path="/topics" component={Topics}/>
        </div>
      </Router>
    )
  }
}
export default App

• 2、与redux集成

// 先安依赖：npm install --save react-router-redux@next  npm install --save history
import React from 'react'
import ReactDOM from 'react-dom'
import { Route } from 'react-router'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

import reducers from './reducers' // Or wherever you keep your reducers

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history)

// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  applyMiddleware(middleware)
)

// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))

ReactDOM.render(
  <Provider store={store}>
    { /* ConnectedRouter will use the store from Provider automatically */ }
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/topics" component={Topics}/>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
)

• 3、参考
  1、v4中文文档
  2、初探 React Router 4.0
  3、React Router 4 简介及其背后的路由哲学