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

待我称王封你为后i 2023-10-06 20:58 61阅读 0赞

#### React Router ####

*  阐述
 *  标签式重定向
 *  编程式重定向
 *  示例
 *   *  ReactRouterDemo\\demo01\\src\\index.js
     *  ReactRouterDemo\\demo01\\src\\AppRouter.js
     *  ReactRouterDemo\\demo01\\src\\Pages\\Index.js
     *  ReactRouterDemo\\demo01\\src\\Pages\\List.js
     *  ReactRouterDemo\\demo01\\src\\Pages\\Home.js

## 阐述 ##

个人认为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 (  <h2>我是 Home 页面</h2> );
        }
    }
    
    export default Home;

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

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

`ReactRouterDemo\demo01\src\AppRouter.js`

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/>` 标签，而是直接使用JS的语法实现重定向。

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

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

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

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

## 示例 ##

![在这里插入图片描述][82d286fbdd114f39a951ba11a95e6c45.gif_pic_center]

### ReactRouterDemo\\demo01\\src\\index.js ###

import React from 'react';
    import ReactDOM from 'react-dom'
    import AppRouter from './AppRouter'
    
    ReactDOM.render(<AppRouter/>,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 (
        <Router>
            <ul>
                <li> <Link to="/">首页</Link> </li>
                <li><Link to="/list/123">列表</Link> </li>
            </ul>
            <Route path="/" exact component={
        Index} />
            <Route path="/list/:id" component={
        List} />
            <Route path="/home/" component={
        Home} />
        </Router>
      );
    }
    
    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 (
                <ul>
                    {
        
                        this.state.list.map((item,index)=>{
        
                            return (
                                <li key={
        index}>
                                    <Link to={
        '/list/'+item.uid}> {
        item.title}</Link>
                                    <Redirect to="/home/" />
                                </li>
                            )
                        })
                    }
                </ul>
            )
        }
    }
    
    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 (  
                <h2> List Page-> {
        this.state.id}</h2>
            );
        }
    
        //-关键代码---------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 ###

[82d286fbdd114f39a951ba11a95e6c45.gif_pic_center]: https://img-blog.csdnimg.cn/82d286fbdd114f39a951ba11a95e6c45.gif#pic_center