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/");

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

以上关于P04: ReactRouter路由重定向-Redirect使用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。