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…