问题描述

我有以下组件。

import React, { Component, useState, useEffect } from 'react';
import { Link, useParams, Redirect } from 'react-router-dom';
import { useDispatch, connect } from 'react-redux';

const SampleComponent = (props) => {
  const onOverlayHandle = () => {
    console.log('overlay clicked');
    return <Redirect to='/feedback' />
  }

    return (
    <div className='view dialog'>
      <div className='form'>
        <h3>CONTENTS</h3>
      </div>
      <div className='overlay' onClick={onOverlayHandle}></div>
    </div>
  );
}

const mapStateToProps = state => (state);

export default connect(mapStateToProps)(SampleComponent);

如您所见，有一个覆盖div与onClick事件。它触发onOverlayHandle函数。在该函数内部，我记录一个简单文本，然后将用户重定向到/feedback路由。因此，当我单击overlaydiv时，它会记录消息，但不会将用户重定向到指定的路由。

我做错了什么，我如何修复此问题？

推荐答案

如果要在单击后重定向，则应使用历史记录。

import { Link, useParams, Redirect, useHistory } from 'react-router-dom';
import { useDispatch, connect } from 'react-redux';

const SampleComponent = (props) => {
  const history = useHistory();

  const onOverlayHandle = () => {
    console.log('overlay clicked');
    history.push("/feedback");
  }

    return (
    <div className='view dialog'>
      <div className='form'>
        <h3>CONTENTS</h3>
      </div>
      <div className='overlay' onClick={onOverlayHandle}></div>
    </div>
  );
}

如果要使用重定向，您需要创建一个状态变量，然后有条件地返回重定向。

import React, { Component, useState, useEffect } from 'react';
import { Link, useParams, Redirect } from 'react-router-dom';
import { useDispatch, connect } from 'react-redux';

const SampleComponent = (props) => {
  const [redirect, setRedirect] = useState(false);

  const onOverlayHandle = () => {
    console.log('overlay clicked');
    setRedirect(true);
  }

  if(redirect) {
    return <Redirect to="/feedback" />
  }

    return (
    <div className='view dialog'>
      <div className='form'>
        <h3>CONTENTS</h3>
      </div>
      <div className='overlay' onClick={onOverlayHandle}></div>
    </div>
  );
}

这篇关于重定向路由不会重定向到reactjs中的指定路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！