React-Router4

React-Router4

• 4是全新的版本, 和之前的版本不兼容, 浏览器和 RN 均兼容
• React 开发单页应用必备, 践行路由即组件的概念
• 核心概念: 动态路由, Route, Link, Switch

使用

• npm install react-router-dom

入门组件

• BrowserRouter, 包裹整个应用
• Router 路由对应渲染的组件, 可嵌套
• Link 跳转专用
• exact 路由完全匹配

// index.js
import React from 'react'
import ReactDom from 'react-dom'
import {
  createStore,
  applyMiddleware,
  compose
} from 'redux'
import thunk from 'redux-thunk'
import {
  Provider
} from 'react-redux'
import { BrowserRouter, Link, Route } from 'react-router-dom'

import App from './App'
import {
  counter
} from './index.redux'

const store = createStore(counter, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : () => {}
))

function Erying() {
  return 
二营
}
function Qibinglian() {
  return 
骑兵连
}
ReactDom.render(
  (
    
      

        

          

            一营
          
          

            二营
          
          

            骑兵连
          
        
        
        
        
      
    
  ),
  document.getElementById('root')
)

其他组件

• url 参数, Router组件参数可用冒号标识参数
• Redirect 组件 跳转
• Switch 只渲染一个子 Route 组件

和 redux 配合

• 复杂 redux 应用, 多个 reducer, 用 combineReducers 合并

import {combineReducers} from 'redux'
import {counter} from './index.redux'
import {auth} from './Auth.redux'

export default combineReducers({counter, auth})