Lately I'm learning and trying to do chat app with react. Today I ve ran into a problem with react-router:
I'm using custom link (/string/:userid1/:userid2) which is supposed to show me chat between users and it works, but when i try to change chat to other IDs (other users) my page doesn't reload and it doesn't show me other chat untill i reload page manually.
The quesion is if there is any possibility to refresh component / page after clicking Link button
<Link to={`/chat/${params.myuid}/${friends.uid}`}><div className="text-center pt-3"><img className="friends-img" src={friends.url} alt=""/></div></Link>
Try making the variables you get form the url a part of your page state.
I mean everytime it changed there should be a change in your state.
It may help you page re-render without a manual reload.
Tip: useEffect with the route variables in the dependancy array.
Related
When I am navigating to component then I am using this code
this.router.navigate(['', ROUTE_CONSTANTS.CONTRACT, ROUTE_CONSTANTS.CONTRACT_EDIT, {selectedContract: btoa(JSON.stringify(selectedContract))}]);
this brings to edit page now there is cancel button on edit page and that should bring to previous page
this.router.navigate(['/', ROUTE_CONSTANTS.CONTRACT],{
queryParamsHandling: 'merge'
});
everything works well, but while navigating from cancel button in browser url previous url path with all parameters are still there like this :
http://localhost:4200/contract/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
I want to remove
/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
while coming back on contract route
I tried approaches based on this link : How to update previous page URL in Angular
But still I am not able to do so
I'm working on a Vue.js 2 application, and I'm having difficulties handling page refresh/reload properly.
There are three issues:
Loss of current route
Loss of router params
Loss of selected tab on QTabPanel component
I managed to solve the second problem by saving the router params on a Vuex store, but I don't know how to solve the other two. I thought of storing also the selected Quasar's tab on Vuex, but it could be annoying, giving the fact that, on some components, I have multiple levels of nested tab panels.
I also don't know how to make the application stay on the current route after refreshing (I'm using history mode).
Could someone please give me a hint?
In my application, I have a multi-page form that lives on the URL http://localhost:3000/form. When I change pages in the form, the URL remains the same, but the state changes to render different views (pages of the form).
A new feature I want to implement is to allow the browser back button to switch views/pages (aka change state) in the multi-page form.
Is this possible? How can I achieve this?
Why exactly do you want to keep the same route? If a user wants to get back to the same state they were at via a deep link they would not be able to with this implementation would they?
If you want to use the same route you can at least use # routes to keep track of where in the form the user is.
Eg.
http://localhost:3000/form#step1,
http://localhost:3000/form#step2
then the back button would work to move them back a step.
I have a situation where I need to display two different components say A and B under same URL C. Currently, I' am displaying A which is a modal using Location service's go method which updates URL but doesn't activate Route to load appropriate components. This solution is working fine. The only problem related to this is that if user interacts with browser's back and forward buttons then the other component B mentioned in Route config is displayed which is not what I intended.
I only want to load B under same URL when user refreshes page. For example, if user clicks a button, then I' am loading A by updating browser's URL via Location service giving user the illusion that the URL is properly loaded. Now if at this point, users refreshes the page, I want to display B which is a completely different template.
Is there any way, where I can pass dynamic data in components while loading them without displaying dynamic data in URL?
I'm attempting to rewrite a small part of user history as soon as they visit my angular application.
Currently I'm attempting to change the last history item to a certain page once the app loads, however instead of just changing the history, the current page/url also changes.
In my app.js where I define my routes for angular I also have a .run containing
history.pushState({}, 'Restaurants List', document.URL.match(/.+#\//).toString() + 'orders/restaurants')
this instantly will change my url from the intended target to the new history entry.
I've also tried using replaceState without any success.
A solution I've thought of is first changing the history then redirecting the user which works fine, but I want to avoid that additional overhead.
Is there any way to just add to the history without going to it so that if the user hits back it goes to a different page?