score:6
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 = () => {
...
Source: stackoverflow.com
Related Query
- React <Redirect> after transition not working
- React - Redirect not working after api call
- React redirect after login not working
- React router private routes / redirect not working
- React Router v4 Redirect not working
- React router not working after building the app
- React Router 4.x - PrivateRoute not working after connecting to Redux
- My react project not working after deploy to firebase hosting
- React hooks useState/setState not working after sorting the array and passing it
- react transition group appear transitions not working properly
- React css webkit animation is not working after setState
- React router after adding createBrowserHistory, the app is not working as expected
- React js getInitialState not working after converting to es6
- React Router Redirect not working in Private Route
- Css transition not working on conditional rendering in React
- Redirect with state not working in React Router 4.x
- Redirect in React Router not working when I click from Users to Post
- Color change on react not working after a while
- Headless UI "leave" transition not working in React
- React setState not working after deleting data from state copy
- React Routes not working after building the app using webpack
- Why is my Redirect not working after the verifications?
- React Router 5. Component not rendered after redirect
- React BrowserRouter Route is not working after deploy
- React app route not working after deployed to IIS
- React CSS Transition not working and classes never getting applied
- React transition group is not working when using a function to out components
- React - external links not working after deployment
- transition effect is not working for mobile menu in react js with styled components
- matching passwords with react hooks is not working after onchange
More Query from same tag
- How to detect props changes in React?
- React Router Conflicts two routes
- Why can't I reference object in an array in Redux?
- How can I grab the text value from content in tiptap react (typescript) wysiwyg?
- UNREGISTER_FIELD does not update syncErrors
- Why is Firebase email verification giving me a http 400 error?
- I am trying to use the react hook useContext() but its not working
- Deconstruct and convert in React
- How to do a Yup email validation on space separated values?
- Heroku producing Error H10 and crashing app
- React js dropdown not scrollable
- react firebase firestore Expected type 'Pa', but it was: a custom Va object
- How can we specifically use the data comes from the api in the map function?
- React build causes CORS error when there were no issues in development
- Need Help Simplifying an Immutable.js Array of Objects update
- Facebook flux deficiency
- Verify Token generated in C# with System.IdentityModel.Tokens.Jwt
- React setState not working with websocket
- React: get nested components
- In React app , I delete my component data on firebase but it does'n delete from my dom even when I change the state
- Jest SyntaxError: Unexpected token <
- conditional button visibility with react hooks
- Firestore limit using react-infinite-scroll-component only scroll with the given limit
- Save javascript image Croppie result to paperclip backend
- Escaping "import" and react/html to display as text in MDX?
- How to query graphql in react typescript
- React.lazy import { StudentDashaboard, StudentLearningView } from './studentView.jsx';
- React/Redux: Where are my props?
- How to apply filter component to my products
- How to add padding below xaxis label in ApexChart.js