在开发中，重定向和404这种需求非常常见，使用react-router4.0可以使用redirect进行重定向
最常用的就是用户登录之后自动跳转主页。
import react, { component } from 'react'; import axios from 'axios'; import { redirect } from 'react-router-dom'; class login extends component{ constructor(){ super(); this.state = {value: '', logined: false}; this.handlechange = this.handlechange.bind(this); this.tologin = this.tologin.bind(this); } handlechange(event) { this.setstate({value: event.target.value}) } tologin(accesstoken) { axios.post('yoururl',{accesstoken}) .then((res) => { this.setstate({logined: true}); }) } render() { if(this.props.logined) { return ( <redirect to="/user"/> ) } return ( <p> <input type="text" value={this.state.value} onchange={this.handlechange} /> <a onclick={() => { this.tologin(this.state.value) }}>登录</a> </p> ) } } export default login;
以上这个示例仅仅是将登录的状态作为组件的state使用和维护的，在实际开发中，是否登录的状态应该是全局使用的，因此这时候可能你会需要考虑使用redux等这些数据状态管理库，方便我们做数据的管理。这里需要注意的使用传统的登录方式使用cookie存储无序且复杂的sessionid之类的来储存用户的信息，使用token的话，返回的可能是用户信息，此时可以考虑使用sessionstorage、localstorage来储存用户信息（包括头像、用户名等），此时书写reducer时需要指定初始状态从存储中获取，如：
const login_success = 'login_success'; const login_failed = 'login_failed'; const loginout = 'loginout'; const login = function(state, action) { if(!state) { console.log('state'); if(sessionstorage.getitem('usermsg')) { return { logined: true, usermsg: json.parse(sessionstorage.getitem('usermsg')) } } return { logined: false, usermsg: {} } } switch(action.type) { case login_success: return {logined: true,usermsg: action.usermsg}; case login_failed: return {logined: false,usermsg:{}}; case loginout: return {logined: false, usermsg: {}}; default: return state } }; export default login;
指定404页面也非常简单，只需要在路由系统最后使用route指定404页面的component即可
<switch> <route path="/" exact component={home}/> <route path="/user" component={user}/> <route component={nomatch}/> </switch>
当路由指定的所有路径没有匹配时，就会加载这个nomatch组件，也就是404页面
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js原型对象使用的步奏详解
js设置元素样式步奏详解
以上就是react-router4.0实现重定向与404功能的详细内容。