第一步、React-router 初体验
1. 安装 react-router-dom :
cnpm install react-router-dom --save
2. 引入需要的路由组件:
import { BrowserRouter, Route, Link } from 'react-router-dom';
3. 创建简单跳转路由(核心代码)
<BrowserRouter>
<div>
<ul>
<li>
<Link to="/">北京</Link>
</li>
<li>
<Link to="/sz">深圳</Link>
</li>
<li>
<Link to='/sh'>上海</Link>
</li>
</ul>
<Route path="/" exactcomponent={BJ} ></Route>
<Route path="/sz" component={SZ} ></Route>
<Route path="/sh" component={SH} ></Route>
</div>
</BrowserRouter>
4. 展示效果:
第二步、React-router 进阶体验
1. 路由重定向:Redirect
2. 404页面的制作:Switch
/*只渲染命中的第一个Route*/
<Switch>
<Route path="/" exact component={BJ} ></Route>
<Route path="/sz" component={SZ} ></Route>
<Route path="/sh" component={SH} ></Route>
<Route path="/:location" component={404} ></Route>
</Switch>
3. 合并reducer
(1) reducer.js
import { combineReducers } from 'redux';
import { counter } from './index.redux.js';
import { auth } from './Auth.redux.js';
export default combineReducers({counter,auth});
(2) index.js
...
import reducer from './reducer.js'
const store = createStore(reducer, compose(
applyMiddleware(thunk),
window.devToolsExtenson ? window.devToolsExtenson() : f=>f
));
console.log(store.getState());
//打印出 :{ auth : {isAuth: false, user: "movi"} , counter:10 }
4. Redux登陆校验 ( 如果没有登录直接跳转到登录页面 )
(1)Dashboard.js 组件
class Dashboard extends Component{
render(){
console.log(this.props);
const match = this.props.match;
const redirectToLogin = <Redirect to="/login"></Redirect>
const app = (
<div>
<h3>面板页面</h3>
<button onClick={this.lououtAccount}>注销账号</button>
<ul>
<li>
<Link to={`${match.url}/`}>北京</Link>
</li>
<li>
<Link to={`${match.url}/sz`}>深圳</Link>
</li>
<li>
<Link to={`${match.url}/sh`}>上海</Link>
</li>
</ul>
<Route path={`${match.url}/`} component={BJ} exact ></Route>
<Route path={`${match.url}/sz`} component={SZ} ></Route>
<Route path={`${match.url}/sh`} component={SH} ></Route>
</div>
);
return this.props.isAuth ? app : redirectToLogin;
}
lououtAccount = ()=>{
this.props.logout();
}
}
(2)Auth.js 组件
class Auth extends Component{
/* constructor(props){
super(props);
}*/
render(){
console.log(this.props);
return (
<div>
{ this.props.isAuth ? <Redirect to="/dashboard" /> : null }
<h3>目前您还没有权限,需要登录才能查看!</h3>
<button onClick={ this.handleClick }>点击登陆</button>
</div>
)
}
handleClick = ()=>{
this.props.login();
console.log(this.props);
}
}
(3)实现效果