重定向_React Router 重定向（Redirect）的使用

最新推荐文章于 2024-07-13 21:47:20 发布

聂世歆

最新推荐文章于 2024-07-13 21:47:20 发布

阅读量2.7k

点赞数

文章标签：重定向

本文链接：https://blog.csdn.net/weixin_32864847/article/details/112696718

版权

本文介绍了React Router的两种重定向方式：标签式重定向和编程式重定向。标签式适用于简单逻辑，如从组件直接跳转到组件；编程式则常用于业务逻辑中，如登录成功后跳转到会员中心。通过示例代码展示了如何实现这两种重定向方法。

摘要由CSDN通过智能技术生成

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;

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