react登录页面_React 实现路由拦截

接到个新项目，使用的是React，由于React没有属于自己的路由拦截方法，只有自己封装Route成高阶组件来实现，现记录下实现的方式：

首先创建一个router文件，引入项目需要展示的组件 。

export const routes = [{path: '/live',component: LiveSquare},{path: '/monit',component: MonitoringCenter},]

2. 创建一个PrivateRoute文件，判断是否已登录，已登录则进入页面，否则重定向到登录页

import React from 'react' import { Route, Redirect } from 'react-router-dom'; let authenticate = ()=> {const token = localStorage.getItem("token");return token ? true : false; } const PrivateRoute = ({ component: Component, ...rest }) => {console.log('authenticate1',authenticate())return (<Route{...rest}render={props => authenticate() ? <Component {...props} /> :<Redirect to={{pathname: "/login",state: { from: props.location }}} />}></Route>) }export default PrivateRoute

3.接着创建一个ContenMain文件，用于将第一步中创建的router文件中引入的页面展示，此处需要使用到React的高阶组件withRouter，后续跳转页面的时候可以获取到history。

import React,{Component} from 'react'; import {Switch,withRouter,Route} from 'react-router-dom'; import PrivateRoute from '@/router/PrivateRoute'; import {routes} from '@/router/route';class ContentMain extends Component{render(){return(<div className="routeWrap"><Switch>{routes.map(item=>{return (item.path?<PrivateRoute path={item.path} exact component={item.component}/>:<Route component={NoMatch}/>)})}</Switch></div>)} } export default withRouter(ContentMain);

4.以上文件配置好后就可以在app.js中引用PrivateRoute文件

import React from 'react'; import { HashRouter, Route, Switch, Redirect } from 'react-router-dom' import Index from '@/Page/Index/index'; import Login from '@/Page/Login/Login.js' import PrivateRoute from '@/router/PrivateRoute'; class App extends React.Component {constructor(props) {super(props);this.state = {};}componentWillMount() {}render() {const { isLogins } = this.state;return (<HashRouter ><Switch><Route path='/login' component={Login} /><PrivateRoute path='/' component={ Index }></PrivateRoute></Switch></HashRouter>);} }export default App;

ContenMain是展示登录成功后的页面的，所以是在Index.js中引用就可以了

import React from 'react'; import Navigation from '@/Page/Navigation/Navigation'; import { Layout } from 'antd'; import ContentMain from '@/Components/ContenMain'; function Home() {return (<Layout><Navigation /><Layout><ContentMain /></Layout></Layout>); } export default Home;

一个封装的路由拦截就实现了，如果有什么不对的地方欢迎留言指正

总结

以上是生活随笔为你收集整理的react登录页面_React 实现路由拦截的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。