重定向_React Router 重定向（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/");
           

就可以顺利实现跳转，这样看起来和上面的过程是一样的。

这两种方式的重定向你可以根据真实需求使用，这样能让你的程序更加的灵活。

案例：

import React, {Component} from 'react';
import './style.less';

class Header extends Component {

    clickBackHandler (){
        // 返回到上一级页面的几种方法
        //第一种 this.props.history.push('/home');
        //第一种 this.props.history.replace('/home'); 但这两种方法都不好
        //第三种方法,推荐使用
        window.history.back(-1);
    }

    render() {
        return (
            <div id="common-header">
                {/*Header 公共头组件*/}
                <span className="back-icon">
                    <i className="icon-chevron-left" onClick={ this.clickBackHandler }></i>
                </span>
                <h1>{ this.props.title }</h1>
            </div>
        );
    }
}