Develop Reference

how to go previous state without resetting state

I have a problem. I have an example1.js file that fetches data from DB in options. when I select the option data shown in table form.
when I click on the button to mark attendance it goes to another component e.g example2.js with param. but when I go back it must be in the same selected option. Anyone can help me. Code for go back is the following I am using.
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const goback= () => { navigate(-1) };

You can use redux or for going back you can simply use the in built js function of history i.e history.back()

I highly recommend you to use Redux store for this: https://redux.js.org/
Using Redux(recommended approach). You can create your own state and write reducer to handle/set/change state.
In your component when you would like to receive the state you can use useSelector hook or connect, if want to change your state, use useDispatch, please read how to create a store and usage of hooks related to Redux: https://react-redux.js.org/api/hooks
Using context(not recommended for your purposes because it is not designed for high-performance/many actions. But it is easier to setup/use if you don't need a Redux).
Please read about context: https://reactjs.org/docs/context.html
All in all, you need to preserve your state 'somewhere' in Redux or Context to prevent refreshing the data while navigating/rerendering the component.

I you are not comfortable to use redux then try to use react reducers and context api together to create redux like structure. It helps maintaining states between different routes even on navigation.
You can refer these link.
https://hmh.engineering/using-react-contextapi-usereducer-as-a-replacement-of-redux-as-a-state-management-architecture-336452b2930e
https://blog.logrocket.com/react-hooks-context-redux-state-management/

Accessing react components directly from URL

I am trying to create an new react app. I have 3 components: app (with login functionality) , admin and client.
How can I render (redirect to) admin / client based on a value (user role) , after successfully login?
Is this any way to access the admin / client components directly from the URL? More specific, localhost:3000 takes me to App.js (witch makes sense, because it is defined like this in index.js). If I want to see directly the admin component (hijacking the login), can I use for example localhost:3000/admin ? how can I do that?
Thank you !

You can use react router and in particular route.push('/admin')
You need to define the '/admin' route and voilà.
To bypass the login, you may want to make a 'test-admin' route and a private 'admin' route. Here is how to make a private route if you happen to need it:
https://dev.to/karanpratapsingh/private-public-and-restricted-routes-in-react-42ff

You can use react-router, that allow to define some route based on URL.
When you have a login feature, then you would probably wants to have some protected route, that are only accessible when you are logged in.
Then I recommend you to read this article

Refresh NextJS query parameters on SSR React app

I have Server Side Render set up, so every time an user visit a page, for example
mypage?query=one
nextjs will cache that value for all the user, which is of course wrong.
So even if the user will have
mypage?query=two
still nextjs router.query function will return the value one while asPath is correct (showing the current URL).
How can I, in a class component, update the cached version with the current query? Which lifecycle is more opportune to use?

How to programmatically navigate with preact-router?

I'm trying to figure out how to structure the frontend part of a web application using typescript, preact and preact-router. I've come a long way but I still need to figure out how to programmatically navigate (redirect) with preact-router. I can do history.replaceState(null, null, '/#/redirectedUrl');, but while that changes the URL in the location bar, preact-router doesn't route to the new URL.
What is the preferred way to programmatically navigate when using preact-router?

Importing the function route from 'preact-router' is the way to go:
import { route } from 'preact-router';
route('/url/to/rout/to');

You can do it in two ways based on your need
import { route } from 'preact-router';
route('url');
This will create a pushState in the history (i.e.,) it will create a new entry for this url
import { route } from 'preact-router';
route('url', true);
This will create a replaceState in the history (i.e.,) this will replace the current page url entry in the history with the url you will be routing to. You can make use of this in cases like, when routing from login screen to your home/dashbaord screen, where on click of browser back button, you don't want user to go back to login screen once the user has been logged in (thus replacing the login entry with your dashbaord entry).

Navigate away from react-router?

My React app is currently nested inside of a Spring app, which means my routing is mixed. For example, /route/1 is handled by react-router, but /route/1/details is not.
I have a component which receives a destination URL from the server as props. Some destinations are inside the router and others are outside. In an attempt to safely use <Link /> in place of <a />, I have the following catch-all route handler:
{
path: '*',
onEnter({location}) {
window.location.href = location.pathname;
}
}
This works to get me out of react-router and back to Spring; however, it breaks the back button. Pressing back from here cycles through the URL history without ever reloading the page. (The history is all routes handled by react-router.)
Am I missing something obvious here? I think I want back to force a reload, but I'm not sure how. (I see that this is sort of an XY-problem; I'm open to suggestions for different ways of approaching the problem.)
I recognize this is not an ideal solution; it is one step in a migration plan.