P04: ReactRouter路由重定向-Redirect使用

个人认为Redirect(重定向),就掌握基本的两个知识点就可以了:

  • 标签式重定向:就是利用<Redirect>标签来进行重定向,业务逻辑不复杂时建议使用这种。
  • 编程式重定向:这种是利用编程的方式,一般用于业务逻辑当中,比如登录成功挑战到会员中心页面。

重定向和跳转有一个重要的区别,就是跳转是可以用浏览器的回退按钮返回上一级的,而重定向是不可以的。

标签式重定向

这个一般用在不是很复杂的业务逻辑中,比如我们进入Index组件,然后Index组件,直接重定向到Home组件。我们也结合这个场景,看一下如何实现。

首先建立一个Home.js的页面,这个页面我还是用快速生成的方式来进行编写,代码如下。

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 页面</h2> );
    }
}

export default Home;

这个页面非常简单,就是一个普通的有状态组件。

有了组件后可以配置一下路由规则,也就是在AppRouter.js里加一个<Route>配置,配置时记得引入Home组件。

import Home from './Pages/Home'
<Route path="/home/" component={Home} />

之后打开Index.js文件,从Index组件重新定向到Home组件,记得需要先引入Redirect

import { Link , Redirect } from "react-router-dom";

引入Redirect后,直接在render函数里使用就可以了。

<Redirect to="/home/" />

现在就可以实现页面的重定向。

编程式重定向

编程式重定向就是不再利用<Redirect/>标签,而是直接使用JS的语法实现重定向。它一般用在业务逻辑比较发杂的场合或者需要多次判断的场合。我们这里就不模拟复杂场景了,还是利用上边的例子实现一下,让大家看到结果就好。

比如直接在构造函数constructor中加入下面的重定向代码。

 this.props.history.push("/home/");

就可以顺利实现跳转,这样看起来和上面的过程是一样的。这两种方式的重定向你可以根据真实需求使用,这样能让你的程序更加的灵活。当然你可以试着模拟用户的登录过程试着用一下这样的跳转。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P04: ReactRouter路由重定向-Redirect使用

发表评论

提供最优质的资源集合

立即查看 了解详情