react路由跳转时怎么指定拦截页面?

2021-01-12 10:11发布

现在页面在A路由组件上,跳转到B页面时不需要做拦截但是返回A到页面时要保留之前的状态,挑战到C页面时要提示是否离开,离开后在返回A页面不保留之前的状态

现在页面在A路由组件上,跳转到B页面时不需要做拦截但是返回A到页面时要保留之前的状态,挑战到C页面时要提示是否离开,离开后在返回A页面不保留之前的状态

10条回答
茄子酱
2楼 · 2021-01-12 10:39

不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。

接下来,我们实现一个简单的实例了解路由拦截的基本流程。

页面初次渲染的时候,需要我们进行登录。在这个首屏的页面里,我们放入一个链接。当点击链接,我们想进入我们的布局页面,(实际项目中是我们的后台)。但是布局页面是不允许我们随意进入的。如果没有登录(真实项目中我们以sessionid作为是否登录过的条件),那么页面会强制进入登录页面。否则进入我们的布局页面(实际项目中的后台)

我们这里写几个基本的组件,作为上述条件对应的组件:

login.js   -------->登录页面

Layout.js -------->布局页面(实际项目中的后台)

author   --------->授权组件 (作为拦截组件,拦截的条件写在这个组件中)

isLogin  ---------->判断是否登录过的条件  (实际项目中的sessionID)

这个实例我们需要一个判断条件。也就是isLogin,我们结合状态管理工具,(本实例中的状态管理工具选用mobx),isLogin==true,表示我们我们可以访问该组件。否则表示我们无权访问该组件。

 

--------------------------------------------------------------------------------------------

复制代码

 1 index.js文件(入口文件) 2  3 import registerServiceWorker from './registerServiceWorker'; 4 import {Provider} from "mobx-react"; 5 import {observable} from "mobx"; 6 import {BrowserRouter,Switch,Route} from "react-router-dom"; 7 import Login from "./components/login/Login.js" 8 import AuthorizedRoute from "./components/author/author.js" 9 import Layout from "./components/Layout.js"10 11 class Store{12  @observable isLogin=false;   
13 }14 const store=new Store()15 16 ReactDOM.render(17     18          19          
20              21              22              23              24              25          
26          
27     
28     , document.getElementById('root'));29 30 registerServiceWorker();

复制代码

 

-----------------------------------------------------------------------------------------

复制代码

 1 author.js(主要内容是导出一个授权的组件。该组件内处理拦截逻辑) 2  3 import React, { Component } from 'react'; 4  5 import {Redirect,Route}from "react-router-dom"; 6 import Login from "../login/Login.js" 7 import {observer,inject} from "mobx-react"; 8 @inject("store") 
 9 @observer class AuthorizedRoute extends Component{10   render(){11        console.log("author里的store:",this.props.store)12        let { component: Component,...rest} =this.props; //获取顶层provider上所有的信息13        let {isLogin}=this.props.store;14       console.log("isLogin:",isLogin)15     console.log("this.props:",this.props)16     return(17             {18                return isLogin?: //这里的实际上指向的是Layout组件19             }}/>20         )21   }22 }23 export default AuthorizedRoute

复制代码

 

-----------------------------------------------------------------------------------

复制代码

 1 login.js(登录组件) 2  3 import React, { Component } from 'react'; 4  5 import{Link} from "react-router-dom" 6 class Login extends Component{ 7   render(){ 8     return( 9                
10                          

请输入账户:

11                          

请输入密码:

12                          
13                          进入main组件14                
15         )16   }17 }18 export default Login

复制代码

 

------------------------------------------------------------------------------------

复制代码

 1 Layout.js (布局组件) 2  3 import React, { Component } from 'react'; 4  5 class Layout extends Component{ 6   render(){ 7     return( 8                
 9                     
10                         
    11                             
  • 1111
  • 12                             
  • 2222
  • 13                             
  • 33333
  • 14                         
15                     
16                     
17                          

wenben1

18                          

wenben1

19                          

wenben1

20                          

wenben1

21                     
22                
23         )24   }25 }26 27 export default Layout28 这里我们对layout组件进行了拦截,如果还有其他的页面也需要进行拦截,我们也可以在index.js中多添加一个授权组件。把它的component指向该组件,比如我们还有一个home页面也需要判断。那么我们可以做如下修改:29 30    31          32          
33              34              35              36              37              38              39          
40          
41     

复制代码

 

 

这个实例中我们用的是mobx作为状态管理工具,在全局定义了一个isLogin,我们也可以利用redux实现同样的功能,真实项目中一般我们会在登录以后通过访问后台返回的sessionID来进行判断。登录成功以后我们把sessionID存入sessionStorage中,在授权组件(本例中的AuthorizedRoute)先在本地取出sessionID,再通过它进行判断。


不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。

思禹小姐姐y
4楼 · 2021-01-12 14:02

不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。

接下来,我们实现一个简单的实例了解路由拦截的基本流程。

页面初次渲染的时候,需要我们进行登录。在这个首屏的页面里,我们放入一个链接。当点击链接,我们想进入我们的布局页面,(实际项目中是我们的后台)。但是布局页面是不允许我们随意进入的。如果没有登录(真实项目中我们以sessionid作为是否登录过的条件),那么页面会强制进入登录页面。否则进入我们的布局页面(实际项目中的后台)

我们这里写几个基本的组件,作为上述条件对应的组件:

login.js   -------->登录页面

Layout.js -------->布局页面(实际项目中的后台)

author   --------->授权组件 (作为拦截组件,拦截的条件写在这个组件中)

isLogin  ---------->判断是否登录过的条件  (实际项目中的sessionID)

这个实例我们需要一个判断条件。也就是isLogin,我们结合状态管理工具,(本实例中的状态管理工具选用mobx),isLogin==true,表示我们我们可以访问该组件。否则表示我们无权访问该组件。


收获很多
5楼 · 2021-01-13 10:04

不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。

接下来,我们实现一个简单的实例了解路由拦截的基本流程。

页面初次渲染的时候,需要我们进行登录。在这个首屏的页面里,我们放入一个链接。当点击链接,我们想进入我们的布局页面,(实际项目中是我们的后台)。但是布局页面是不允许我们随意进入的。如果没有登录(真实项目中我们以sessionid作为是否登录过的条件),那么页面会强制进入登录页面。否则进入我们的布局页面(实际项目中的后台)

我们这里写几个基本的组件,作为上述条件对应的组件:

login.js   -------->登录页面

Layout.js -------->布局页面(实际项目中的后台)

author   --------->授权组件 (作为拦截组件,拦截的条件写在这个组件中)

isLogin  ---------->判断是否登录过的条件  (实际项目中的sessionID)

这个实例我们需要一个判断条件。也就是isLogin,我们结合状态管理工具,(本实例中的状态管理工具选用mobx),isLogin==true,表示我们我们可以访问该组件。否则表示我们无权访问该组件。


樱田妮妮NiNi
6楼 · 2021-01-13 10:37

import React from ‘react’
import { Route, withRouter } from ‘react-router-dom’

/**

  • 统一路由监听

  • 登录后不做任何处理 未登录跳转到登录页
    */
    export default @withRouter
    class extends React.PureComponent {
    constructor (props) {
    super(props)
    this.redirect(props)
    }

// nextProps
componentWillReceiveProps (np) {
this.redirect(np)
}

// 重定向
redirect = np => {
const { history } = np

// 判断是否登录了
if (!localStorage.getItem('token')) {
  const pathname = history.location.pathname
  // 如果是登录页 不跳转 否则会死循环
  if (!pathname.includes('login')) {
    history.push('/login')
  }
}12345678

}

render () {
const { path, component } = this.props
return
}
}


小小收藏家
7楼 · 2021-01-13 11:41

不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。

接下来,我们实现一个简单的实例了解路由拦截的基本流程。

页面初次渲染的时候,需要我们进行登录。在这个首屏的页面里,我们放入一个链接。当点击链接,我们想进入我们的布局页面,(实际项目中是我们的后台)。但是布局页面是不允许我们随意进入的。如果没有登录(真实项目中我们以sessionid作为是否登录过的条件),那么页面会强制进入登录页面。否则进入我们的布局页面(实际项目中的后台)

我们这里写几个基本的组件,作为上述条件对应的组件:

login.js   -------->登录页面

Layout.js -------->布局页面(实际项目中的后台)

author   --------->授权组件 (作为拦截组件,拦截的条件写在这个组件中)

isLogin  ---------->判断是否登录过的条件  (实际项目中的sessionID)

这个实例我们需要一个判断条件。也就是isLogin,我们结合状态管理工具,(本实例中的状态管理工具选用mobx),isLogin==true,表示我们我们可以访问该组件。否则表示我们无权访问该组件。



梵梵
8楼 · 2021-01-14 13:51

我做的时候是创建了全局的一个方法,然后prompt起来后会自定调用并且将callback传了过来。只需要在确认是执行callback(true)就可以了。
export const history = createHistory({
getUserConfirmation(message, callback) {

console.log(history)
store.dispatch(openConfirmDialog('注意', //title
        '数据未保存,确定离开?', //message
        callback, //confirm func
        null, // cancel func
        true // unsave flg
      ));

}
});

页面:


清屿
9楼 · 2021-01-14 16:12

不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。

接下来,我们实现一个简单的实例了解路由拦截的基本流程。

页面初次渲染的时候,需要我们进行登录。在这个首屏的页面里,我们放入一个链接。当点击链接,我们想进入我们的布局页面,(实际项目中是我们的后台)。但是布局页面是不允许我们随意进入的。如果没有登录(真实项目中我们以sessionid作为是否登录过的条件),那么页面会强制进入登录页面。否则进入我们的布局页面(实际项目中的后台)

我们这里写几个基本的组件,作为上述条件对应的组件:

login.js   -------->登录页面

Layout.js -------->布局页面(实际项目中的后台)

author   --------->授权组件 (作为拦截组件,拦截的条件写在这个组件中)

isLogin  ---------->判断是否登录过的条件  (实际项目中的sessionID)

这个实例我们需要一个判断条件。也就是isLogin,我们结合状态管理工具,(本实例中的状态管理工具选用mobx),isLogin==true,表示我们我们可以访问该组件。否则表示我们无权访问该组件。


相关问题推荐

  • react组件生命周期?2020-06-11 20:09
    回答 8

    组件的生命主要包括3个阶段: 挂载、更新、卸载挂载:     constructor()componentWillMount()render()componentDidMount()更新componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()卸载compon......

  • 回答 6

    无论是大厂或者一般公司的招聘对框架的要求是熟悉或者至少掌握vue,react,angular中的一门,而且一般在大厂里每个团队的技术框架相对来说比较稳定,一般会挑选一门主要的技术框架,其它的作为辅助,除非有重大原因,否则一般不会轻易变更主要技术栈。...

  • react中的key的作用2020-07-24 10:56
    回答 4
    已采纳

    通常认为当 React 元素内包含数量或顺序不确定的子元素时,需要提供 key 属性来定位元素是否已经存在。在实际使用中可以认为 key是一个接口,用来对哪些元素新建,哪些元素删除。比如现有一个List,每个组件新增时需要用ID向后端发起请求(函数应该放在didmou...

  • 前端react 按钮的处理2021-03-23 09:47
    回答 5

    react 按钮代码[removed][removed][removed][removed][removed][removed][removed]//在这里写react代码const element=Hello React;//function Square(props){   return(         {props.value}          );}ReactDOM.render(,d......

  • 回答 3

    前端常用的一个框架

  • 回答 2

    我们一般使用React是是做SPA单页面应用,也就是数据影响视图,性能更优化向对于传统的MPA多页面应用。

  • 回答 1

    创建更新查询:可使用更新查询在一次操作中更改多个行中的内容。创建删除查询:可以通过使用删除bai查询删除表中的所有行。

  • 回答 5

    import React, { Component } from 'react'import ReactEcharts from 'echarts-for-react'import Background from '../../assets/img/background2.png'import Background3 from '../../...

没有解决我的问题,去提问