【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(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
)

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

<ul>
  <li>
    <Link to='/'>总部</Link>
  </li>
  <li>
    <Link to='/tecDep'>技术部</Link>
  </li>
  <li>
    <Link to='/HRDep'>人事部</Link>
  </li>
</ul>

路由的渲染模板：

{/* 路由的渲染模板，渲染哪个路由，就写哪个路径 */}
<Route path='/' exact component={App}></Route>{/* exact代表完全匹配 */}
<Route path='/tecDep' component={tecDep}></Route>
<Route path='/HRDep' component={HRDep}></Route>

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

上代码：
./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 <h2>技术部</h2>
}
function HRDep() {
  return <h2>人事部</h2>
}

ReactDom.render(
  <Provider store={store}>
    <BrowserRouter>
      <div>
        {/* 指定路由跳转的导航 */}
        <ul>
          <li>
            <Link to='/'>总部</Link>
          </li>
          <li>
            <Link to='/tecDep'>技术部</Link>
          </li>
          <li>
            <Link to='/HRDep'>人事部</Link>
          </li>
        </ul>
        {/* 路由的渲染模板，渲染哪个路由，就写哪个路径 */}
        <Route path='/' exact component={App}></Route>{/* exact代表完全匹配 */}
        {/* 以下两个组件不存在，所以我们先定义两个无状态组件 */}
        <Route path='/tecDep' component={tecDep}></Route>
        <Route path='/HRDep' component={HRDep}></Route>
      </div>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
)

最后编辑于：2018.04.02 11:12:20