Question

我有以下代码：

import { Redirect } from 'react-router-dom';
import QPContent from '../QPContent';

class AnswerContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false
    };
  }

  render() {
    const { redirect } = this.state;
    if (redirect) {
      return <Redirect push to={'/question/'+this.props.qID}/>;
    }

    return (
      <div className="qp-answer-container">
        ....
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch, ownprops) => ({
....
});

const mapStateToProps = (state) => ({
....
});

export default connect(mapStateToProps, mapDispatchToProps)(AnswerContainer);`

我在父组件中有一组AnswerContainer个组件。我目前正在路线/question/qId。我正在尝试刷新设置redirect: true的页面。因此，当我使用setState()并将列表中只有一个组件的状态更改为redirect: true时，父组件不会重新呈现。相反，子组件消失了。为什么会发生这种情况以及如何在<Redirect/>上触发整个页面的重新渲染？

注意：我在动作setState()

中呼叫dispatch

Answer 1

如果您真的想要重新渲染整个页面，只需使用window.location.reload()。

<Redirect />组件的想法是更新当前网址，而不是重新渲染组件。当然，他们通常会重新渲染，因为最常见的是，当网址发生变化时，您会显示其他内容。但是，反应的工作是尽可能少地重新渲染。

React Router - 渲染<redirect>而不是子列表组件

1 个答案: