Question

我在使用react-router-dom进行极其简单的重定向时遇到了问题。

当我单击触发重定向的div时，当前组件将消失。 URL将更改为适当的路由。但新组件没有出现。如果我重新加载页面，我会得到新的组件。这是怎么回事？

以下是cont：

的组件

import React from 'react'; 
import { connect } from 'react-redux'; 
import './BoardPost.css'; 
import { getNewQuiz } from '../../actions/quiz'; 
import { Redirect } from 'react-router-dom';

export class BoardPost extends React.Component {

    handlePostClick() {
        console.log(this.props.quiz.id)
        this.props.dispatch(getNewQuiz(this.props.quiz.title))      
    }

    render() {
        if (this.props.quizActive) {
            return <Redirect to="/quiz" />; 

        }
        else {
            return ( 
                <div className="board-post" onClick={() => this.handlePostClick()}> 
                    <img className="board-post-image" alt="planet image" src={this.props.quiz.image} />
                </div>
            )
        }
    }
}

const mapStateToProps = state => ({
    quizActive: state.answers.length > 0
}); 

export default connect(mapStateToProps)(BoardPost);

这是包装器组件，它包含不同的路由：

export class App extends Component {

  render() {
    return (
      <div className="App">
        <Header />
        <Route exact path="/" component={Board} />
        <Route exact path="/quiz" component={Quiz} />
        <Footer />
      </div>
    );
  }
}

当我点击className =“board-post”的div时，我应该被重定向。但是一旦我重新加载，我才会看到新组件。旧组件消失，新路由显示在URL栏中，但在我手动重新加载页面之前没有新组件。

Answer 1

我缺少导出默认值withRouter（connect（mapStateToProps）（App））;在包装器组件的底部。

react-router-dom仅适用于重载

1 个答案: