React Router 4 表单提交后重定向示例

表单设置fireRedirect为发起从定向的标记,当表单提交后,更新它的值为fireRedirect=true。当fireRedirect为true时,重定向到原来的页面。

import React, { Component } from 'react'
import { Redirect } from 'react-router'

export default class MyForm extends Component {
  constructor () {
    super();
    this.state = {
      fireRedirect: false
    }
  }
  
  submitForm = (e) => {
    e.preventDefault()
    this.setState({ fireRedirect: true })
  }
  
  render () {
    const { from } = this.props.location.state || '/'
    const { fireRedirect } = this.state
  
    return (
      <div>
        <form onSubmit={this.submitForm}>
          <button type="submit">Submit</button>
        </form>
        {fireRedirect && (
          <Redirect to={from || '/success'}/>
        )}
      </div>
    )
    
  }
}

版权声明:著作权归作者所有。

相关推荐

React 16.2:Fragments语法的使用

React 16.2最大的变化是新增了fragments特性,fragments语法。示例:返回一首诗的片段敬请阅读 <h2>面朝大海,春暖花开</h2> <p>从明天起,做一个幸福的人</p> <p>喂马、劈柴,周游世界</p> <p>...</> React 16之前的版本在Re

SpringBoot入门示例

创建Maven POM文件在pom.xml添加内容如下:<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht

Git撤销最后一次提交

Git可以使用reset重置来撤销提交。方法一撤销最后一次提交git reset HEAD~1 执行后,状态重置为上一次提交,且撤回提交的文件的状态变回unstaged,即文件没有被git跟踪。示例$ git commit -m 'add test.html' [master ade6d7e] add&nbs

HTML 5关闭表单的自动填充(Autocompletion)

在HTML 5可以使用autocomplete属性关闭表单的自动填充。autocomplete="off" autocomplete可以在两个地方使用:form标签和input等输入标签form标签在form标签添加autocomplete="off"是关闭整个表单的自动填充。<form method="post"

Nginx重定向http到https

Nginx重定向http到https:方法一【推荐】使用响应码301,301内容参考HTTP 301 Moved Permanently。server {     listen         [::]:80;  &nb