1

I am having trouble with an extremely simple redirect with react-router-dom.

When I click a div that triggers a redirect, the current component disappears. The URL changes to the appropriate route. But the new component does not appear. If I reload the page, I get the new component. What's going on?

Here is the component that 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);

Here is the wrapper component, which includes the different routes:

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

When I click the div with className="board-post", I should be redirected. But I only see the new component once I reload. The old component disappears, the new route appears in the URL bar, but no new component until I reload the page manually.

HoldOffHunger
  • 10,963
  • 6
  • 53
  • 100
J Seabolt
  • 1,790
  • 3
  • 16
  • 41
  • 1
    And there were no errors in the console? – Tim Han Feb 15 '18 at 19:54
  • There are zero errors. The state is changed in redux. The route changes in the URL. But no new component. – J Seabolt Feb 15 '18 at 19:56
  • Can you, please, show the part of the code where you use the Router? In the provided snippets I can only see the Routes. And which version of react router are you using? – Gleb Kostyunin Feb 15 '18 at 19:59
  • I was missing export default withRouter(connect(mapStateToProps)(App)); at the bottom of the wrapper component. Got it. – J Seabolt Feb 15 '18 at 20:00

1 Answers1

0

I was missing export default withRouter(connect(mapStateToProps)(App)); at the bottom of the wrapper component.

J Seabolt
  • 1,790
  • 3
  • 16
  • 41