上一篇中沾乘，我們寫的跳轉(zhuǎn)都是寫在
index.js文件中，實際項目肯定不會是這樣的浑测，所以翅阵，這里，我們再來改寫一下案例迁央，做成多頁面切換的掷匠，用react-router4來實現(xiàn)。
首先岖圈，我們捋一捋思路：
- 假設(shè)我們現(xiàn)在有兩個頁面：登錄頁面
Auth.js和 應(yīng)用內(nèi)頁Dashboard.js讹语； - 入口的
index.js文件就要寫入兩個頁面的路由渲染模板； - 以
Auth.js為第一個頁面蜂科，在頁面中判斷用戶是否登錄募强，已登錄株灸，直接Redirect到Dashboard.js，沒有登錄就直接渲染當(dāng)前頁面Auth.js即可 - 對應(yīng)
Auth.js使用的用戶信息擎值，登錄的交互事件慌烧，也以Redux進(jìn)行管理，單獨創(chuàng)建一個Auth.redux.js進(jìn)行管理鸠儿。 - 應(yīng)用內(nèi)頁
Dashboard.js則是之前的案例中就寫好的組件屹蚊，將其從index.js的渲染中剝離出來，單獨封裝成一個應(yīng)用內(nèi)頁进每。 - 應(yīng)用內(nèi)頁
Dashboard.js就包含了App.js組件汹粤，其num屬性、人員增減方法也是有一個index.redux.js文件在管理田晚。 - 這時候嘱兼，會出現(xiàn)多個
reducer，所以需要用combineReducer方法來用多個reducer去創(chuàng)建一個整體的reducer贤徒。 -
Auth.js依舊Auth.redux.js的用戶登錄信息進(jìn)行渲染頁面判斷芹壕，同時，也能通過Auth.redux.js的登錄動作去實現(xiàn)登錄跳轉(zhuǎn)接奈。 -
Dashboard.js則是根據(jù)Auth.redux.js的登出動作去實現(xiàn)登出跳轉(zhuǎn)踢涌。
思路差不多就是這樣，接下來就是動手寫代碼：
./scr路徑下創(chuàng)建Auth.js文件序宦，先簡單的寫下框架睁壁，作為登錄驗證的頁面：
import React, { Component } from 'react'
class Auth extends Component {
render(){
return(
<div>
<h2>當(dāng)前尚未登錄</h2>
<p>點擊登錄</p>
</div>
)
}
}
export default Auth
./scr路徑下創(chuàng)建Dashboard.js文件，把之前index.js文件內(nèi)的移到這里互捌，作為應(yīng)用內(nèi)的主頁面：
import React, { Component } from 'react'
import { Link ,Route} from 'react-router-dom'
import App from './App'
//定義兩個無狀態(tài)組件
function tecDep() {
return <h2>技術(shù)部</h2>
}
function HRDep() {
return <h2>人事部</h2>
}
class Dashboard extends Component {
render(){
return(
<div>
{/* 指定路由跳轉(zhuǎn)的導(dǎo)航 */}
<ul>
<li>
<Link to='/dashboard'>總部</Link>
</li>
<li>
<Link to='/dashboard/tecDep'>技術(shù)部</Link>
</li>
<li>
<Link to='/dashboard/HRDep'>人事部</Link>
</li>
</ul>
<Route path='/dashboard' exact component={App}></Route>
<Route path='/dashboard/tecDep' component={tecDep}></Route>
<Route path='/dashboard/HRDep' component={HRDep}></Route>
</div>
)
}
}
export default Dashboard
修改
index.js的渲染部分潘明，因為index.js屬于入口，只要套每個功能頁面的最頂層秕噪，修改成：
//引入新創(chuàng)建的兩個頁面組件
import Auth from './Auth'
import Dashboard from './Dashboard'
.
.
.
//render修改一下
ReactDom.render(
<Provider store={store}>
<BrowserRouter>
<Switch>
{/* 路由的渲染模板钉疫，渲染哪個路由，就寫哪個路徑 */}
<Route path='/login' component={Auth}></Route>
<Route path='/dashboard' component={Dashboard}></Route>
<Redirect to='/HRDep'></Redirect>
</Switch>
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
到這一步巢价，我們手動在瀏覽器地址欄輸入http://localhost:3000/dashboard和http://localhost:3000/login就能看到頁面了牲阁。接下來開始處理數(shù)據(jù)的操作以及事件的執(zhí)行。
針對
Auth.js的用戶信息和登錄事件壤躲，都用react-redux來處理城菊，在./src目錄下創(chuàng)建Auth.redux.js文件：
//管理登錄驗證相關(guān)的信息和事件
const LOGIN = 'login'
const LOGOUT = 'logout'
export function authReducer(state = {isAuth:false,userName:'Mike'},action){
switch (action.type) {
case LOGIN:
return {...state,isAuth:true}
case LOGOUT:
return {...state,isAuth:false}
default:
return state
}
}
export function loginAction() {
return {type:LOGIN}
}
export function logoutAction() {
return {type:LOGOUT}
}
Auth.js內(nèi)部要取對應(yīng)的值和事件，但是碉克，index.js里面使用的是manageCompany來創(chuàng)建的store凌唬，怎么把Auth.redux.js的reducer也放進(jìn)去呢，這就需要用到combineReducers方法來生成一個整體漏麦，我們在./src目錄下創(chuàng)建Reducer.js文件：
//把引入的reducer整合成一個傳出去
import { combineReducers } from 'redux'
import { manageCompany } from './index.redux'
import { authReducer } from './Auth.redux'
export default combineReducers({manageCompany ,authReducer})
index.js中也改寫下：
import Reducers from './Reducer'
.
.
.
const store = createStore(Reducers, compose(
applyMiddleware(thunk),
reduxDevtools
))
有了新的
store之后客税，就可以開始為登錄頁面Auth.js寫登錄邏輯了：
import React, { Component } from 'react'
//引入react-redux所需的庫况褪、reducer中的登錄事件、登錄后頁面重定向的庫
import { connect } from 'react-redux'
import { loginAction } from './Auth.redux'
import { Redirect } from 'react-router-dom'
//自動連接redux
@connect(
state=>state.authReducer,
{ loginAction }
)
class Auth extends Component {
render(){
return(
<div>
//根據(jù)用戶的狀態(tài)更耻，判斷是否要重定向测垛，登錄后因為會刷新渲染，也會走一次判斷
{this.props.isAuth ? <Redirect to='/dashboard'></Redirect> : null}
<h2>當(dāng)前尚未登錄</h2>
<p onClick={this.props.loginAction}>點擊登錄</p>
</div>
)
}
}
export default Auth
但是此時會報錯：
錯誤
因為兩處
connect的地方傳入的state類型無法自動對應(yīng)上秧均，這里我們就要自己動手去修改了食侮，問題出來./scr/App.js中，把connect的地方修改為：
@connect((state)=>{
//需要哪些狀態(tài)數(shù)據(jù)
return {num : state.manageCompany}
} ,{ hire, hireAsync ,fire })
到此目胡，登錄已經(jīng)實現(xiàn)了锯七。
Dashboard.js也要實現(xiàn)一個登出的功能：
//引入`connect`、`logoutAction`
import { connect } from 'react-redux'
import { logoutAction } from './Auth.redux'
.
.
.
@connect(
state=>state.authReducer,
{ logoutAction }
)
class Dashboard extends Component {
render(){
const match = this.props.match
const redirectToLogin = <Redirect to='/login'></Redirect>
const app = (
<div>
{/* 指定路由跳轉(zhuǎn)的導(dǎo)航 */}
<ul>
<li>
<Link to={`${match.url}`}>總部</Link>
</li>
<li>
<Link to={`${match.url}/tecDep`}>技術(shù)部</Link>
</li>
<li>
<Link to={`${match.url}/HRDep`}>人事部</Link>
</li>
</ul>
<Route path={`${match.url}`} exact component={App}></Route>
<Route path={`${match.url}/tecDep`} component={tecDep}></Route>
<Route path={`${match.url}/HRDep`} component={HRDep}></Route>
{this.props.isAuth ?<p onClick={this.props.logoutAction}>登出</p> : null}
</div>
)
return(
this.props.isAuth ? app :redirectToLogin
)
}
}
至此已經(jīng)實現(xiàn)了頁面登錄登出的切換效果誉己。
上代碼：
App.js
import React , { Component } from 'react'
import { connect } from 'react-redux'
import { hire, hireAsync ,fire } from './index.redux'
//狀態(tài)映射屬性
@connect((state)=>{
//需要哪些狀態(tài)數(shù)據(jù)
return {num : state.manageCompany}
} ,{ hire, hireAsync ,fire })
class App extends Component {
render() {
return (
<div>
<h1>公司現(xiàn)在有{this.props.num}人</h1>
<p onClick={this.props.hire}>雇傭一人</p>
<p onClick={this.props.hireAsync}>雇傭一人,晚兩天到</p>
<p onClick={this.props.fire}>開除一人</p>
</div>
)
}
}
export default App
Auth.js
//登錄驗證頁面
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { loginAction } from './Auth.redux'
import { Redirect } from 'react-router-dom'
@connect(
state=>state.authReducer,
{ loginAction }
)
class Auth extends Component {
render(){
return(
<div>
{this.props.isAuth ? <Redirect to='/dashboard'></Redirect> : null}
<h2>當(dāng)前尚未登錄</h2>
<p onClick={this.props.loginAction}>點擊登錄</p>
</div>
)
}
}
export default Auth
Auth.redux.js
//管理登錄驗證相關(guān)的信息和事件
const LOGIN = 'login'
const LOGOUT = 'logout'
export function authReducer(state = {isAuth:false,userName:'Mike'},action){
switch (action.type) {
case LOGIN:
return {...state,isAuth:true}
case LOGOUT:
return {...state,isAuth:false}
default:
return state
}
}
export function loginAction() {
return {type:LOGIN}
}
export function logoutAction() {
return {type:LOGOUT}
}
Dashboard.js
import React, { Component } from 'react'
import { Link ,Route ,Redirect} from 'react-router-dom'
import App from './App'
import { connect } from 'react-redux'
import { logoutAction } from './Auth.redux'
//定義兩個無狀態(tài)組件
function tecDep() {
return <h2>技術(shù)部</h2>
}
function HRDep() {
return <h2>人事部</h2>
}
@connect(
state=>state.authReducer,
{ logoutAction }
)
class Dashboard extends Component {
render(){
const match = this.props.match
const redirectToLogin = <Redirect to='/login'></Redirect>
const app = (
<div>
{/* 指定路由跳轉(zhuǎn)的導(dǎo)航 */}
<ul>
<li>
<Link to={`${match.url}`}>總部</Link>
</li>
<li>
<Link to={`${match.url}/tecDep`}>技術(shù)部</Link>
</li>
<li>
<Link to={`${match.url}/HRDep`}>人事部</Link>
</li>
</ul>
<Route path={`${match.url}`} exact component={App}></Route>
<Route path={`${match.url}/tecDep`} component={tecDep}></Route>
<Route path={`${match.url}/HRDep`} component={HRDep}></Route>
{this.props.isAuth ?<p onClick={this.props.logoutAction}>登出</p> : null}
</div>
)
return(
this.props.isAuth ? app :redirectToLogin
)
}
}
export default Dashboard
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 Reducers from './Reducer'
import { BrowserRouter, Route ,Redirect ,Switch} from 'react-router-dom'
import Auth from './Auth'
import Dashboard from './Dashboard'
const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : ()=>{}
// 通過reducer創(chuàng)建store眉尸，通過compose把幾個函數(shù)組合起來
const store = createStore(Reducers, compose(
applyMiddleware(thunk),
reduxDevtools
))
ReactDom.render(
<Provider store={store}>
<BrowserRouter>
<Switch>
{/* 路由的渲染模板，渲染哪個路由巨双，就寫哪個路徑 */}
<Route path='/login' component={Auth}></Route>
<Route path='/dashboard' component={Dashboard}></Route>
<Redirect to='/dashboard'></Redirect>
</Switch>
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
index.redux.js
// 定義成常量噪猾，盡量避免使用魔法值
const HIRE = 'hireEmployee'
const FIRE = 'fireEmployee'
// 導(dǎo)出并且定義reducer
export function manageCompany(total = 1, action) {
switch (action.type) {
case HIRE:
return total + 1;
case FIRE:
return total - 1;
default:
return 1;
}
}
// type為HIRE的action
export function hire() {
return {type : HIRE}
}
// type為HIRE的異步action
export function hireAsync() {
return dispatch=>{
setTimeout(()=>{
dispatch(hire())
},2000)
}
}
// type為FIRE的action
export function fire() {
return {type : FIRE}
}
Reducer.js
import { combineReducers } from 'redux'
import { manageCompany } from './index.redux'
import { authReducer } from './Auth.redux'
export default combineReducers({manageCompany ,authReducer})
