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使用
码云笔记 » P04: ReactRouter路由重定向-Redirect使用