重定向路由不会重定向到reactjs中的指定路由

Question

我有以下组件。

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 路由。所以当我点击overlay div 时，它会记录消息，但不会将用户重定向到指定的路由。

我做错了什么，我该如何解决？

Answer 1

如果您想在点击后重定向，您应该使用历史记录。

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>
  );
}