- 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 <h2>二营</h2>
}
function Qibinglian() {
return <h2>骑兵连</h2>
}
ReactDom.render(
(<Provider store={store}>
<BrowserRouter>
<div>
<ul>
<li>
<Link to="/">一营</Link>
</li>
<li>
<Link to="/erying">二营</Link>
</li>
<li>
<Link to="/qibinglian">骑兵连</Link>
</li>
</ul>
<Route path='/' exact component={App}></Route>
<Route path='/erying' component={Erying}></Route>
<Route path='/qibinglian' component={Qibinglian}></Route>
</div>
</BrowserRouter>
</Provider>),
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})
