接到個新項目，使用的是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 实现路由拦截的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。