React After Transition Not Working

I have the following component which has a redirection route after an animation is finished, like so: Menus.jsx class Menus extends Component{ constructor (props) { super(pro

Solution 1:

When you say url changes at browser but nothing happens; only if I refresh the browser /coffee is sucessfully mounted.

This might be the issue with your Routes.

When you redirect to path /coffee/${this.state.select}, you should have Route to handle this path.

<Route path="/coffee/:select?" render={() => ( <Coffees isAuthenticated={true}/> )}/>

Note: Be aware of adding exact prop to Route. When you add exact prop it means your path should match exactly with all the provided params.

Solution 2:

You need to call getCoffee function in also componentDidUpdate function.

  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getCoffee();
    }
  };
  componentDidUpdate() {
    if (this.props.isAuthenticated) {
      this.getCoffee();
    }
  };

Solution 3:

Your Redirect should be inside the render().

render(){
    if(this.state.redirect) {
        return(<Redirect to={`/coffee/${this.state.select}`} />)
    } else {
        return ( 
            <div>
               ...your component
            </div> ); 
    }
}

Note that this way you shouldn't need your renderCoffee() function.

I'm on mobile so i wasn't able to test if it works. Let me know if this works for you.

Solution 4:

It seems your Menu component construtor has no closing bracket.

...

class Menus extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        select: 'espresso',      
        isLoading: false,
        redirect: false
    };
  } // did you miss this?

gotoCoffee = () => {

...