How to Change Route on Submit in a Search Bar Using Next.js

Discover how to prevent page reloads and navigate to a new route in Next.js when submitting a search bar.
---
This video is based on the question https://stackoverflow.com/q/68183156/ asked by the user 'Raf Dor' ( https://stackoverflow.com/u/16250671/ ) and on the answer https://stackoverflow.com/a/68183302/ provided by the user 'A D' ( https://stackoverflow.com/u/16344146/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How do I change route onSubmit in a searchbar?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Changing the Route on Submit in a Search Bar Using Next.js

If you're building a web application with Next.js, you might want to provide a smooth user experience by allowing users to navigate to a different route when they submit a search query. However, you might notice that the default behavior of a form submission is to refresh the entire page, which can be frustrating if you’re aiming for a seamless transition. In this guide, we will explore how to effectively change the route on form submission without causing a page refresh.

Understanding the Problem

When users type in a search query and hit "enter," you typically want them to be redirected to a search results page. However, in your current implementation, the page refreshes instead of redirecting, which can be puzzling. Here’s the snippet of code you initially had:

[[See Video to Reveal this Text or Code Snippet]]

Although you correctly use the router.push() method to change the route, the page still reloads. This behavior is due to the default action of the form element, which is to submit and refresh the page.

The Solution

To achieve the desired behavior, you need to prevent the default form submission action from occurring. This can be done by modifying the onSubmit function to include event.preventDefault(). Here’s how you can update your code:

Updated Code Example

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Code Change

Event Parameter: By adding event as a parameter to the onSubmit function, you can access properties and methods related to the form event.

Preventing Default Behavior: The line event.preventDefault(); prevents the default action of the form submission—this stops the page from refreshing.

Routing: After preventing the default behavior, you can safely call router.push('/search') to navigate to your search results page.

Conclusion

By implementing the above change, you can enhance the user experience in your Next.js application by preventing unwanted page reloads when submitting a search form. This technique can be applied to various forms in your application, allowing for efficient navigation and interaction without disrupting the state of the page.

Next time you’re working with forms in Next.js, remember to use event.preventDefault() to ensure smooth transitions between routes! Happy coding!

Видео How to Change Route on Submit in a Search Bar Using Next.js канала vlogize