执行switch case语句时如何重定向到reactjs中的另一个页面？

Question

我想知道如何在 case 语句之后进行重定向。我一直在制作这段代码，但是在 case 语句之后，什么也没有发生。我在网上查看，但似乎没有任何效果。当我提交经过验证的表单时，它不会重定向或刷新。

代码

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

const initState = {}

const adReducer = (state = initState, action) => {
  switch (action.type) {
    case 'CREATE_AD_SUCCESS':
    alert('create ad success');
    return <Redirect to='/' /> ;
  case 'CREATE_AD_ERROR':
    alert('create ad error');
    return state;
  default:
    return state;
  }
 };

export default adReducer;

adAction.js 代码

export const createAd = (ad) => {
  return (dispatch, getState, {getFirebase,getFirestore}) => {
  // make async call to database
  const firestore = getFirestore();
  const profile = getState().firebase.profile;
  const authorId = getState().firebase.auth.uid;
  firestore.collection('ads').add({
  ...ad,
  authorFirstName: profile.firstName,
  authorLastName: profile.lastName,
  authorId: authorId,
  createdAt: new Date()
  }).then(() => {
    dispatch({ type: 'CREATE_AD_SUCCESS' });
  }).catch(err => {
    dispatch({ type: 'CREATE_AD_ERROR' }, err);
  });
 }
};

创建广告代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createAd } from '../../store/actions/adActions'
import { Redirect } from 'react-router-dom'
import firebase from "firebase";
import FileUploader from "react-firebase-file-uploader";

class CreateAd extends Component {
  state = {
    title: '',
    content: '',
    avatar: "",
    isUploading: false,
    progress: 0,
    avatarURL: "",
    contactno:""
  }
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.createAd(this.state);
  }

handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
handleProgress = progress => this.setState({ progress });
handleUploadError = error => {
  this.setState({ isUploading: false });
  console.error(error);
};

handleUploadSuccess = filename => {
  this.setState({ avatar: filename, progress: 100, isUploading: false });
  firebase
    .storage()
    .ref("images")
    .child(filename)
    .getDownloadURL()
    .then(url => this.setState({ avatarURL: url }));
};

  render() {
    const { auth } = this.props;
    if (!auth.uid) return <Redirect to='/signin' /> 
    return (
      <div className="container">
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Create a New Ad</h5>
          <div className="input-field">
            <input type="text" id='title' onChange={this.handleChange} />
            <label htmlFor="title">Ad Title</label>
          </div>
          <div className="input-field">
            <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            <label htmlFor="content">AdContent</label>
          </div>
          <div className="input-field">
            <input type="text" id='contactno' onChange={this.handleChange} />
            <label htmlFor="title">Contact Number</label>
          </div>


          { this.state.progress==100? <div class="col-md-4">
          <img class="responsive-img" src={this.state.avatarURL}></img>
          </div>:""}
          <br/>
          <label style={{backgroundColor: 'steelblue', color: 'white', padding: 10, borderRadius: 4, pointer: 'cursor'}}>
            Upload a photo

          {/* {this.state.isUploading && <p>Progress: {this.state.progress}</p>}
          {this.state.avatarURL && <img src={this.state.avatarURL} />} */}
            <FileUploader
              hidden
              accept="image/*"
              storageRef={firebase.storage().ref('images')}
              onUploadStart={this.handleUploadStart}
              onUploadError={this.handleUploadError}
              onUploadSuccess={this.handleUploadSuccess}
              onProgress={this.handleProgress}
            />
            </label>



          <div className="input-field">
            <button className="btn pink lighten-1">Create</button>
          </div>
        </form>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    auth: state.firebase.auth
  }
}

const mapDispatchToProps = dispatch => {
  return {
    createAd: (ad) => dispatch(createAd(ad))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CreateAd)

这些是我的代码。

Answer 1

您应该使用return window.location.replace("/") 而不是return <Redirect to="/" />。

“React Router Redirect”从 A 重定向到 B，例如 <Redirect from="/about" to="/" />