3 引入路由
3.1 下载路由包: react-router-dom
npm install --save react-router-dom
3.1.2 路由组件: containers/register/register.jsx
/*
用户注册的路由组件
*/
import React, {Component} from 'react'
export default class Register extends Component {
render() {
return (
<div>Register</div>
)
}
}
3.1.3 路由组件: containers/login/login.jsx
/*
用户登陆的路由组件
*/
import React, {Component} from 'react'
export default class Login extends Component {
render () {
return (
<div>login</div>
)
}
}
3.1.4路由组件: containers/main/main.jsx
/*
应用主界面路由组件
*/
import React, {Component} from 'react'
export default class Main extends Component {
render() {
return (
<div>Main</div>
)
}
}
3.1.5 映射路由 index.js
/**
* 入口
*/
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Switch, Route} from 'react-router-dom'
import Login from './containers/login/login.js'
import Register from './containers/register/register.js'
import Main from './containers/main/main.js'
ReactDOM.render(
<HashRouter>
<Switch>
<Route path='/login' component={Login}/>
<Route path='/register' component={Register}/>
<Route component={Main}/>
</Switch>
</HashRouter>
,document.getElementById('root')
)
3.1.6 引入redux
npm install --save redux@3.7.2 react-redux redux-thunk
npm install --save-dev redux-devtools-extension
3.1.7
redux/reducers.js
/*
包含多个用于生成新的 state 的 reducer 函数的模块
*/
import {combineReducers} from 'redux'
function xxx(state = 0, action) {
return state
}
function yyy(state = 0, action) {
return state
}
//返回合并后的 reducer 函数 export default combineReducers({
xxx, yyy
})
redux/store.js
/*
redux 最核心的 store 对象模块
*/
import {createStore, applyMiddleware} from 'redux' import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension' import reducers from './reducers'
export default createStore(reducers, composeWithDevTools(applyMiddleware(thunk)))
入口index.js
/**
* 入口
*/
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Switch, Route} from 'react-router-dom'
import Login from './containers/login/login.js'
import Register from './containers/register/register.js'
import Main from './containers/main/main.js'
import store from './redux/store'
import {Provider} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<HashRouter>
<Switch>
<Route path='/login' component={Login}/>
<Route path='/register' component={Register}/>
<Route component={Main}/>
</Switch>
</HashRouter>
</Provider>
,document.getElementById('root')
)
最终实现的路由
结语 后续更新中...
完整项目地址：github.com/hongzhengzh…
