Possible to pass state to next/router?

[bryan]

With react-router I was able to do:

browserHistory.push({ pathname: "/", state: { message: 'This is a message forwarded in a state.' } })

Is it possible to do something like this using next/router or a way to redirect the user and also pass some value over to the new page?

[arunoda]

Currently that's not possible and I don't think we'll support it immediate future.

[fultonm]

Next.js is not the same thing as React. Next.js is more focused on server side rendering from my understanding. It's great in some circumstances. The state you are mentioning - does it exist on the server as well as the client simultaneously? That's the problem at hand. Once I realized my app needed traditional React functionality (client-side focused) I went back to OG React.

[arturmuller]

I'd say Next.js need to explain the server/client issue in the docs as History.pushState() is a platform concept that you "loose" in Next. That said, I think it really isn't that much of an issue given that you can totally work around it using context, local or session storage, simple variables, etc.

[EloB]

@arturmuller The only thing that I agree on your statement is that Next.js disables the possibilities of using history state. It's not a easy task to store historic information in either context, local or session storage without it becoming a global state that often are really bad practice for UX.

Single/multiple element scrollbar positioning, collapsible, currentTime (video), form wizards states to name a few scenarios where historical states are way more suited than a global or component states.

Form wizards for instance are terrible with either global or component state.

• If you choose global state than you can't go back in history to an older filled version of the wizard because that will now contain the newer information from the latest filled wizard form. The only way to fix this is that you need to clean that global state after you submitted that form but then you will always come back to an empty form navigating with forward/back buttons in the browser. There are hacky ways to try to solve this by creating a "uuid" in the url when opening a wizard and keep the form data in the global state. The only problem doing so is that the global state will just grow and grow because it's hard to know when a historic event is no longer reachable.
• If you choose component state than you will lose all your information if that component gets unmount. Making the same behavior with reset on submit to the global state.

Both these practices are bad in general. The sad part is they are often used but I would say it's because of incompetence, to few blog posts on the topic and/or lack of support from frameworks.

[EloB]

I also want to say that history state is not a silver bullet. It also comes with it's challenges. For instance that you need "crypto" implementation to store sensitive wizard form data. So "hackers" can't extract previous form data from previous browser sessions if a user logged out.

This because browser lacks native api's to clean the history state. There are API's but they are only available for browser extensions: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history/deleteAll.

[hirwaaldo1]

Having the ability to pass state in useRouter() would be a valuable addition.

[arunoda]

But let's open this and see whether we really really need this.

[nkzawa]

I think you should do this by passing query parameters.

[devodii]

really good fix for this.
but.. the problem becomes how to update the URL when it is no longer needed.

probably gonna incure a bunch of useEffects :D

[bryan]

I mean you can achieve a similar thing by passing in query parameters like nkzawa said, but I'd rather not pollute my the url with http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed and would rather have a state transfer like how react-router does it.

[rauchg]

You can use as to disguise the URL

[bryan]

Well I suppose so, but if I were to use as, the pathname doesn't retain the actual pathname in props.url.pathname, which means more things to pass into the query. It's just cleaner to have it pass the state.

I'm porting over a project to next.js and haven't run into any major compatibility problems since I found ways to refactor codes to make it work, it's just inconvenience and verbosity at this point that can be improved and all this issue is.

Thanks all for your input.

[timneutkens]

Closing this cause of inactivity 👍

[bryan]

A little over a year since I brought this up, but is this still not supportable?

[sergiodxa]

You can save any required state in localStorage, sessionStorage, a variable, a Redux store, etc. and then use it in getInitialProps (checking you are running client side).

[egaleme]

i think nextjs should start supporting react-router

[vaibhavi3t]

I want same functionality.

Earlier I was using CRA and there I used to send state to routed component. I wants same functionality with nextjs.

What @sergiodxa suggested in workaround but library support will be good.

[todesstoss]

Same here, would be great if it will be possible pass data with Router.push() and retrieve it later with withRouter

[namy16]

I want same functionality. Any update on this ?

[namlq93]

I want same functionality. Any update on this ?

me too

[allicanseenow]

Another question related to this issue is:

• I don't want to pollute my URL when I call the Router.push() and I want to pass a state to the next component. Is there any way to do it? Using localStorage or cookie is a bad practice as they are not directly controlled by React hooks or the old React lifecycle

[ramirez]

So, is this issue even being considered?

[mohiden]

Since that is how nextjs functions and this is not considered a bug or anything similar, I don't believe it will be considered.

[EloB]

An bad idea but probably the only way to get around this annoying issue. Is to override the history object and these methods. Than inject this before all client-side code from Next.js being initiated.

This is just pseudo code needs also injecting into popstate.

const methods = ["back", "forward", "go", "pushState", "replaceState"];
const proxy = Object.fromEntries(methods.map((key) => [key, history[key]]))

history.back = function back(...args) {
  // modify args...
  return proxy.back.apply(this, args);
};
history.forward = function forward(...args) {
  // modify args...
  return proxy.forward.apply(this, args);
};
history.go = function go(...args) {
  // modify args...
  return proxy.go.apply(this, args);
};
history.pushState = function pushState(...args) {
  // modify args...
  return proxy.pushState.apply(this, args);
};
history.replaceState = function replaceState(...args) {
  // modify args...
  return proxy.replaceState.apply(this, args);
};

Keep Next.js history states seperate. Then we should be able to at least keep state in history.

history.state: {
  nextState: {
    // here is namespace for all next.js history states.
  },
  appState: {
    // here is namespace for your app history states.
  }
}

If there are some helper functions that prevents app history state only to affect that app state than it should be fine.

References:
https://developer.mozilla.org/en-US/docs/Web/API/History_API

[jscul]

It would be fine if I could use Link as prop... but that doesn't seem to be working in Next 13.4.18.

<Link
  href={{
    pathname: `/content/${i}/post/${i}`,
    query: { relatedPost: true },
  }}
  key={i}
  as={`/content/${i}/post/${i}`}
>

^ I'm not able to get the query param relatedPost on /content/${i}/post/${i}.

[sandeepbfnp]

what if i am redirecting my page to new page on new tab still it will work or not

[JayJ-WeCode]

any solution? 💀

[daxdesai]

This is working
history.push({ pathname: '/results', state: { pattern: value, } });

[QYunChao]

I try history.push but get Uncaught TypeError: history.push is not a function, can you tell me where the history from, thanks

[ekebobrown]

I want to believe that happened on a client component as history is a browser API
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#windowhistorypushstate

[BenEinwechter]

With the AppRouter, you can now use native history.pushState and history.replaceState https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api

Looks like they added experimental support for using the native history API in v14.0.3 and I'm guessing it landed as stable sometime after that since the docs don't say it's experimental. Here's the original PR #58335 so you can read through it to see if any of the tradeoffs affect you.

[benwiley4000]

Thanks @BenEinwechter. I tested this feature out but it seems pretty useless since for client-side navigation it always overwrites history.state immediately. It ought to extend the user-supplied history.state rather than replacing it.

[Dinqe3]

Did u find any solution to this? Same problem here @benwiley4000

[benwiley4000]

No, I wasn't able to find any workaround except for forcing my state into the URL, which is recommended by next I guess, but I don't consider this a good solution. Le mer. 13 mars 2024, 5 h 21 a.m., danbru ***@***.***> a écrit :

…

Did u find any solution to this? Same problem here @benwiley4000 <https://github.com/benwiley4000> — Reply to this email directly, view it on GitHub <#23991 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADHOD3KAS4V43J5MSYGJPSLYYALAHAVCNFSM423FYRE2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TQNZXGAYTSMA> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

[Dinqe3]

Okay. Me either. Found this but did not give it a try: #58335

Solved it by using SessionStorage in the meanwhile.

[lockehooper]

I ran into this issue today and wanted to share a more "Reacty" work around I ended up going with that allows for passing around arbitrarily complex objects. The basic idea is to use the React context to pass whatever objects we want around. The full code for what I did is here.

For those facing this problem looking for a solution that uses traditional React tools/hooks, the context provider is below:

export const LazyDataStoreProvider = ({ children }: { children?: React.ReactNode }) => {
	const internalMap = new Map<string, Object>();

	const contextValue = useMemo(() => {
		return {
			getStoredValue: <T extends Object = Object>(key: string, fetch?: () => T, fallback?: () => void): T | undefined => {
				const foundValue = internalMap.get(key);
				if (foundValue) {
					return foundValue as T;
				}
				if (fetch) {
					const fetchedValue = fetch();
					internalMap.set(key, fetchedValue);
					return fetchedValue;
				}
				if (fallback) {
					fallback();
				}
				return undefined;
			},
			setStoredValue: (key: string, value: Object) => {
				internalMap.set(key, value);
			},
			deleteStoredValue: (key: string) => {
				internalMap.delete(key);
			},
		};
	}, []);

	return <LazyDataStore.Provider value={contextValue}>{children}</LazyDataStore.Provider>;
};

I added this provider at app/layout.tsx (although it doesn't really matter as long as it wraps both the to and from page). Then call the setStoredValue method right before router.push. Then I can use the id that is passed as part of the URL to fetch it from the next page using getStoredValue. I also included fetch and fallback methods that can be used to avoid the user getting stuck if the value they need isn't stored (such as if the page is reloaded). This (or something similar like a bookmark at "/page/[id]") is a common problem case I built a hook for where the backup behavior is to redirect the user to a provided URL:

export const useStoredOrRoute = <T extends Object = Object>(key: string, url: string): T | undefined => {
	const router = useRouter();
	const { getStoredValue } = useLazyDataStore();
	const [shouldRoute, setShouldRoute] = useState(false);

	useEffect(() => {
		if (shouldRoute) {
			router.push(url);
		}
	}, [shouldRoute]);

	return useMemo(() => getStoredValue<T>(key, undefined, () => setShouldRoute(true)), [key]);
};

[PunkFleet]

I am having the same problem and am migrating from react-router. useRouter as a client component should have state functionality and be client focused.

[benwiley4000]

If you have an option to stick with react router I wouldn't migrate to next router, especially if you're relying on history state. Le lun. 18 mars 2024, 4 h 10 a.m., birddle ***@***.***> a écrit :

…

I am having the same problem and am migrating from react-router. useRouter as a client component should have state functionality and be client focused. — Reply to this email directly, view it on GitHub <#23991 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADHOD3KNET3ZZDJC4FMQI63YY2OOLAVCNFSM423FYRE2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TQOBSGQZTOMI> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

[Nura-Programmer]

Does this means we will have to impose redux for passing a single state?

[benwiley4000]

This can work in some cases but will not replace the full functionality of history-bound state. Particularly since history state persists after a refresh.

[Nura-Programmer]

I just render it on the page replacing the form as soon as the response arrived

[Nitin-grappus]

Bhai upi krta 100 INR, krde yaar

[SAIF-git903]

Bhai upi krta 100 INR, krde yaar

hahaha
Maybe he will