score:6

Accepted answer

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.

score:1

you need to call getcoffee function in also componentdidupdate function.

  componentdidmount() {
    if (this.props.isauthenticated) {
      this.getcoffee();
    }
  };
  componentdidupdate() {
    if (this.props.isauthenticated) {
      this.getcoffee();
    }
  };

score:1

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.

score:1

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 = () => {

...

Related Query

More Query from same tag