【React.js 12】react-router4基础知识-1

由于React的特性，所以其跳转页面就和普通的web开发不一样了，为了实现单页面应用的页面切换，React就需要对应的路由库来支持，官方推荐的是react-router这个库，4则是代表这个库当前的版本。

案例为了偷懒，还是用上一篇所写的案例，代码依旧都在文中。

为什么特别标注是4？
因为4和之前的版本不兼容，完全是重新进行了设计，不过4也有更好的兼容性，其和浏览器以及React Native都是兼容的。

• 安装

//版本4之后，拆分出了2分支，-dom对应浏览器，是我们需要的
npm install react-router-dom --save

• 入门组件
  BrowserRouter，用于包裹整个应用
  Router，路由对应渲染的组件，可嵌套
  Link，用于跳转

• 使用
  基于上一篇文章的例子，我们在index.js文件中修改，先引入三个入门组件：

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

用BrowserRouter包裹整个应用App（Provider不算在内，它属于数据传递方面的）。

ReactDom.render(
  
    
      
    
  ,
  document.getElementById('root')
)

然后写一个简单的指定路由跳转的导航：

  

    总部
  
  

    技术部
  
  

    人事部
  

路由的渲染模板：

{/* 路由的渲染模板，渲染哪个路由，就写哪个路径 */}
{/* exact代表完全匹配 */}

简单的页面路由和路由渲染模板就差不多这样了

上代码：
./src/index.js

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

const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : ()=>{}
// 通过reducer创建store，通过compose把几个函数组合起来
const store = createStore(manageCompany, compose(
    applyMiddleware(thunk),
    reduxDevtools
))

//定义两个无状态组件
function tecDep() {
  return 
技术部
}
function HRDep() {
  return 
人事部
}

ReactDom.render(
  
    
      

        {/* 指定路由跳转的导航 */}
        

          

            总部
          
          

            技术部
          
          

            人事部
          
        
        {/* 路由的渲染模板，渲染哪个路由，就写哪个路径 */}
        {/* exact代表完全匹配 */}
        {/* 以下两个组件不存在，所以我们先定义两个无状态组件 */}
        
        
      
    
  ,
  document.getElementById('root')
)