I have some routes within my application. There are some UI changes within a same route. For example, when I click a button, I get resources from the server and display it as a list. I want to mark this point as a separate browser history, so that when the user clicks back from any next route, I am taken back directly to the list instead of the button.
For example,
Route -A > Button is displayed
Upon click,
Route A -> List is displayed
Now when item is clicked
Route B -> Item is displayed.
Now if I click back from Route B, I want to be taken back to Route A with list instead of the button. How can I achieve this?
Any ideas?
I'll assume your app is an SPA (single page application). Routing is then just another way of maintaining application state. Therefore I see two common ways to resolve this:
Create another sub-route for showing list
Implement custom state management. In this case, when you go back to your route you would restore state. Many people will use Redux for global state management, but you are free to set up your own infrastructure.
Either way, you need a way to tell your view that it should render with a state different than the default.
I hope that helps.
Related
I need to add a chat in my nextjs application and I decided to manage it like twitter. You actually can navigate in your chat from the dashboard and then you can choose between your chats by clicking them and next to the list there opens the actual chat.
I think they use nested routes or something like that because you go from /messages to /messages/{id} without actually go to a new path.
What I need is on click of the chat I don't want to go to a new route, but I need to load the chat component and set the pathname from ´/messages´ to /messages/{id}. This is necessary to keep it open in case of refresh of the page. So is there a way to do that in nextjs? Pushing it to a new route implies to duplicate code which is not a good thing, because I would need to keep all the components that are also in /messages plus the chat component.
You can use dynamic routes and optional catch all routes (https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes)
For example, you can create a "messages" folder inside "pages", and create a [[...id]] document (the param inside double brackets is optional).
This way you will be able to have a messages route that may have an id param or not.
And, inside a useEffect for example, once you have fetched your discussions, you can use next router to push your "messages" route with a discussion id and then navigate how you want to.
So I am just wondering if there are any common practices or basic guidelines as to when you should create separate pages vs just updating the components on the current page when using React? I tried to look online and could not find anything.
There are some scenarios in which you need your data or some state persisted, just some update in the UI, like Atlassian Login page.
When you write your email, it changes the route and changes some css (changes password field display from none to block).
Or in Jira next gen, there are tasks, if you click on one of the tasks in a scrum board, the page component is the same, but it brings up a modal component showing up the details of that task.
Why different routes? cause you can share the link and whenever someone navigates to that route, it brings up the page with the same UI that you saw when you copied the link.
Otherwise it's a cleaner approach to handle navigation using separate pages. So it's totally up to you and the kind of UI/UX design.
Maintaining state - Let's say you were doing something on one tab, when you move to the next and come back you should see the same state.
Any refernce for this or how to achive this i am new to react
What you want here is a method to persist your data onto your browser, so you can dehydrate them whenever the user visits your page on different tabs.
Here you have an awesome step-by-step guide.
Essentially, the idea behind it, is you save your state data into your localStorage, so you can then retrieve them back whenever you need it
I'm aware that there's componentDidMount that's called when the component is mounted, however in the case of React's Navigator it does not Unmount the root components when you move to another page. So, for example, if you wanted to refresh information when a page was loaded. How would you go about that?
For example, I'm on a News page and I tap to go to a article. I stay on the article for 15 minutes or so, during this time, new News was added. When I hit the back button and pop the current view, it pulls up the old view. (Does not remount it) How would I go about setting a trigger to reload the data.
I have some ideas for hacks, but want to know if there's a proper way to do it.
The way I've been doing it is by creating a method that would refresh the information in News, then passing it to the next scene and calling it right before the navigator.pop().
Single page apps require careful management of events, DOM elements, and javascript objects in order to avoid leaks.
We're going to manage memory and squash leaks as best we can. That said, the application is large, uses many libraries, and could be left open for days at a time.
We need a safety valve.
I'm looking for ideas on how to unobtrusively trigger a page refresh in a single page app as a way to force the release of memory.
One idea is to detect when the user is idle for more than N minutes and do a refresh then, because it's unlikely to interrupt them. Much of the application state is saved in the URL using AngularJS ui-router, so this will work some of the time.
The problem is that while some state is in the router, not all of it will be. The user could have unsaved changes, or have some modal or flyout menu open which isn't in URL state. A solution could be to detect user changes and ban a refresh if any changes have taken place that aren't in the url. I don't see how to implement this generically though. Maybe we just put everything that's even a little bit important into URL state.
Another idea is to watch the application state change event $stateChangeStart and, every Nth time, do an actual browser navigation to that URL instead of just an app state change. This will never result in lost "sub-state", but will cause a slower page change response and a screen flicker. Maybe every 20 screen changes this is OK though.
Does anybody have any better ideas?
Just an idea on unsaved changes and data:
I have an a single page app that in one section has several tabs each containing a form. When each form becomes "dirty" it triggers a notification to the Main Controller, and sets a flag for that form. When a user saves a particular form the flag becomes unset. If the user tries to navigate away - before the route change occurs, it checks to see if any of the flags are set and then notifies the user via a modal that some particular information hasn't be saved. The user can then decide whether to continue with the route change or go back and save the data.
This could easily be modified to perform the same check on page refresh and if there is unsaved data either cancel the page refresh or save the changes to the browser's local storage for recall after the page has finished refreshing.