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

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