javascript - React Router - 呈现 <Redirect> 而不是子列表组件

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()在 Action 中 dispatch

Answer 1

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

<Redirect />的想法component 是更新当前的url，而不是重新渲染组件。当然，它们通常会重新呈现，因为最常见的是当 url 更改时您会显示其他内容。但是 React 的工作是尽可能少地重新渲染。