react-router4.x 路由控制

本文主要是介绍react-router4.x 路由控制，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.第一种封装一个私有路由
这是我的路由配置，Route大家都知道。不用多讲。PrivateRoute 这个是我自己封装的代码如下：
PrivateRoute.jsx

 

import React from 'react';
import {Route,Redirect,withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import storage from 'utils/storage.js';
//私有路由，只有登录的用户才能访问
class PrivateRoute extends React.Component{componentWillMount(){let  isAuthenticated =  storage.getItem("token") ? true :false;this.setState({isAuthenticated:isAuthenticated})if(!isAuthenticated){const {history} = this.props;setTimeout(() => {history.replace("/login");}, 1000)}}render(){let { component: Component,path="/",exact=false,strict=false} = this.props;return this.state.isAuthenticated ?  (<Route  path={path} exact={exact}  strict={strict}  render={(props)=>( <Component {...props} /> )} />) : ("请重新登录");}
}
PrivateRoute.propTypes  ={path:PropTypes.string.isRequired,exact:PropTypes.bool,strict:PropTypes.bool,component:PropTypes.func.isRequired
}
export default withRouter(PrivateRoute);

使用：

 

.......
import React from 'react';
import {BrowserRouter as Router , HashRouter ,  Route,Link,Switch ,withRouter} from 'react-router-dom';
import {syncHistoryWithStore} from 'react-router-redux'
import reducer from '../reducers/index.js';
import Home from 'container/Home.jsx';
import Login from 'container/Login.jsx';
import Regist from 'container/Regist';
import PrivateRoute from 'component/common/PrivateRoute.jsx';
.......
<Route {...props} path="/login" component={Login} />
<Route {...props} path="/regist" component={Regist} />
<PrivateRoute  path="/home"  component={Home} />
<Route  {...props}  component={Login} />

代码很简单，仔细看一下就明白。这里的PrivateRoute 属性接口和 Route基本类似。我这里只是提供一种思路，大家可以根据自己的业务添加自己的特色。

1. 第二种是使用高阶组件。

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。

现在知道了高阶组件是什么，现在我们就用该思路来做一个高阶私有路由 HocPrivateRoute代码如下
HocPrivateRoute.jsx

 

import React from 'react';
import {Route,Redirect,withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import storage from 'utils/storage.js';function withHocPrivateRoute(WrappedComponent,hocProps){if(!!!WrappedComponent){throw new Error("缺少组件参数");return false;}//withRouter 也是一个高阶组件 传递 historyreturn withRouter(class extends React.Component{constructor(props) {super(props);}componentWillMount(){let  isAuthenticated =  storage.getItem("token") ? true :false;this.setState({isAuthenticated:isAuthenticated})if(!isAuthenticated){const {history} = this.props;setTimeout(() => {history.replace("/login");}, 1000)}}render(){return this.state.isAuthenticated ?  (<WrappedComponent {...hocProps} />) : ("请重新登录");}})
}export default withHocPrivateRoute;

使用：

 

...
import React from 'react';
import {BrowserRouter as Router , HashRouter ,  Route,Link,Switch ,withRouter} from 'react-router-dom';
import {syncHistoryWithStore} from 'react-router-redux'
import reducer from '../reducers/index.js';
import Home from 'container/Home.jsx';
import Login from 'container/Login.jsx';
import Regist from 'container/Regist';
//import PrivateRoute from 'component/common/PrivateRoute.jsx';
import HocPrivateRoute from 'component/common/HocPrivateRoute.jsx';
const  PrivateRoute =  HocPrivateRoute(Route);
...
<Switch>
<Route {...props} path="/login" component={Login} />
<Route {...props} path="/regist" component={Regist} />
<PrivateRoute  path="/home"  component={Home} />
<Route  {...props}  component={Login} />
</Switch>

 

这篇关于react-router4.x 路由控制的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---