I'm passing previously fetched data, through location.state to subsequent components. That works fine, however, if the user hits refresh my history, and location state objects are wiped out. I can see that this is the intended functionality. My question is, am I supposed to be using redux to keep this data persisting? If that's the case, I lose a lot of the benefits of react-router in my opinion. How are people handling state when using react-router?
You can pass the states as props, or save it in localStorage for a wider access.
To be able to persist the data, you should store your data on database or localstorage for an example. And when you refresh the page, you can fetch your data from the store.
If your component is class base component you can use componentDidMount for fetching the data and set the state or redux.
If your component is functional component you can use useEffect for the same scenario.( react version should be greater than 16.8)
https://reactjs.org/docs/react-component.html#componentdidmount
https://reactjs.org/docs/hooks-effect.html
Data can be stored locally on the browser with the localStorage() function. The data can also be sent to the next component by using the this.props.history.push function.
In the end, I chose to save the data in the browser's local storage as I wanted to pass and access the data in a child react component and being able to refresh the page. By saving the data in the local storage the data stay whereas any using the history.push() functionality to pass the data, the data is deleted after hitting the refresh button.
Below there is an example in case you want to pass the content of the pseudo variable in the child component.
localStorage.setItem('pseudo', this.state.pseudo)
OR
this.props.history.push({
pathname: '/NextPage',
data: { pseudo: this.state.pseudo }
});
To get the data in the child component NextPage.js you can use the following code:
props.location.data.pseudo
OR
localStorage.getItem("pseudo")
React-router isn't concerned with state management. To manage state, use Redux or other solutions like Xstate. To persist data on the client you may look at localStorage
Related
I have an axios call that is attached to a notation log component. When a new notation is submitted, it updates the MySQL database, but I can't find a way to get the 'notation log' component to update. I may be looking at the problem wrong. I have it working where the enduser can click on a 🔃 refresh button by forcing the url to redirect to the same page.
You could force an update to re-render the component, but Vue should handle that for you. If you submit the data into the database, the backend could return an updated list for example. Or you just send another GET-request when receiving the answer of your submitting-request and then set properties of your component.
For forcing a re-render, check out this article: https://michaelnthiessen.com/force-re-render/
I use vuex store in my application to store news items from feed. Idea is that if user will navigate to other page and come back on the feed page, posts from store should be visible and loading new data should happen on background.
This works fine but problem occurs when data in background is loaded. When it happens, every single post component is reloaded and mounted again, what creates very bad user experience(since news component is heavy and complicated).
What I want to achieve is to re-render component only if data is new or different. Now every single news component is re-rendered every time, doesn't matter if data is new or the same.
I save data in Vuex this way:
this.insertOrUpdate({data})
And in component get them in computed:
news () {
return News.query().all()
}
and use it in component:
<my-news v-for="item in news"
:key="item.id"
:news="item" />
Have no idea how to prevent re-rendering those components when data is not changing. Is it even possible?
I am trying to refresh a Resource's show view after completing a custom action on admin-on-rest lib.
But I don't see any API to do that.
If I click manually in the "Refresh" button, it works.
Is there a way to refresh the view programmatically?
In order to refresh the screen the state needs to be updated. The updated state can either be the local component state (via setState) or the state provided by the props (if using redux) needs to be updated. If you are using redux I would suggest raising an action that reloads the data from the server into the store.
You can call this.forceUpdate() function to refresh the component programmatically.
Src: React-Docs
Use the refresh redux action which is exported from admin-on-rest. If you have a custom saga which handle your action, just dispatch the refresh action after you're done
I have two different routes /a and /b using the same component. When navigating from /a to /b, I'd like to be able to retrieve the state of the component instance used in /a to reuse it in /b.
I read here https://github.com/angular/angular/issues/12446 that it is or will be possible using Angular "custom route reuse strategies". I am wondering if it's possible using the current RouteReuseStrategy?
Because it seems to be easy to reuse a component when going back to the same url but not when going to a different url using the same component.
I am not sure about your real time use case but you can use RouteReuseStrategy reuse the UI or Component state. You have to generate a common unique key for both route and store that state when you leave the route. Stored state can be re-used when route back with routes which has same key.
In this https://plnkr.co/edit/wFPn16?p=preview
Visited component state reused when you visit to different route. For example view and edit item with id 12345. then check the view and> edit details for id 12346. View and edit component show the details related 12345.
HTH
I'm using react-router and redux-simple-router in conjunction with server side rendering and when I navigate to a url like:
routeActions.push({ pathname: '/main', state: 'some_state'});
I want to be able to extract some_state from the request so I can render an initial redux state and send that back to the client. How do I extract the state from the request on the server side? Where does history and react-router put it?
This is particularly important for mobile because desktop, as I've tested, doesn't fire separate requests but mobile devices do which means the page reloads with a fresh initial state.
state corresponds to state in the History API - it's associated with the current location, but it's only available on the client, so it's not suitable for passing along arbitrary data if your app needs to support server-side rendering.
If you want it to be available on the server, you would need to make it part of the URL. perhaps as a query string.
Aside: location state is useful in other ways in isomorphic/universal apps, such as passing around POSTed form data to be handled using an onEnter hook, or for passing form data and validation errors to use a redirect transition to respond by rendering an invalid form in the same scenario.