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

阐述

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

标签式重定向： 就是利用标签来进行重定向，业务逻辑不复杂时建议使用这种。

编程式重定向： 这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功跳转到会员中心页面。

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

标签式重定向

这个一般用在不是很复杂的业务逻辑中，比如我们进入 Index 组件，然后 Index 组件直接重定向到 Home 组件。

结合这个场景，看一下如何实现。

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

ReactRouterDemo\demo01\src\Pages\Home.js

import React, { Component } from 'react';

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

export default Home;

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

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

ReactRouterDemo\demo01\src\AppRouter.js

import Home from './Pages/Home'

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

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

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

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

编程式重定向

编程式重定向就是不再利用 标签，而是直接使用JS的语法实现重定向。

它一般用在业务逻辑比较发杂的场合或者需要多次判断的场合。 我们这里就不模拟复杂场景了，还是利用上边的例子实现一下，让大家看到结果就好。

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

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

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

示例

ReactRouterDemo\demo01\src\index.js

import React from 'react';
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'

ReactDOM.render(,document.getElementById('root'))

ReactRouterDemo\demo01\src\AppRouter.js

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'
import Home from './Pages/Home'

function AppRouter() {
  return (
    
        
             首页 
            列表 
        
        
        
        
    
  );
}

export default AppRouter;

ReactRouterDemo\demo01\src\Pages\Index.js

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

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {uid:123,title:'willem-1'},
                {uid:456,title:'willem-2'},
                {uid:789,title:'willem-3'},
            ]
        }
    }
    render() { 
        return (
            
                {
                    this.state.list.map((item,index)=>{
                        return (
                            
                                 {item.title}
                                
                            
                        )
                    })
                }
            
        )
    }
}

export default Index;

ReactRouterDemo\demo01\src\Pages\List.js

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    render() { 
        return (  
             List Page-> {this.state.id}
        );
    }

    //-关键代码---------start
    componentDidMount(){
        // console.log(this.props.match.params.id)
        let tempId=this.props.match.params.id;
        this.setState({id:tempId });
     }
    //-关键代码---------end
}

export default List;

ReactRouterDemo\demo01\src\Pages\Home.js

import React, { Component } from 'react';

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

export default Home;