Search for a command to run...
Full Stack Developer | Freelancer | JavaScript | React | Nodejs.
Loves sharing knowledge through technical articles.
Dev.to: https://dev.to/myogeshchavan97
https://linktr.ee/myogeshchavan97
No comments yet. Be the first to comment.
In this tutorial, you will build a Task Management App using Next.js 16 and Prisma 7 from scratch. By creating this app, you will learn: How to set up Prisma 7 with the new Rust-free architecture How to configure a database with Prisma's driver ada...
If you're a React/Next.js developer who diligently updated your packages last week after the critical React2Shell vulnerability (CVE-2025-55182), I have some frustrating news: you need to update again. Security researchers, while probing the patches ...
Is your React app dragging its feet, but you can’t pinpoint the cause? You might think you’re following the best practices, but some common development patterns are actually degrading your app’s performance behind the scenes. In this article, we’ll u...
How to Use Separate SSH Keys for Company and Personal GitHub Accounts Managing multiple GitHub accounts is a common challenge for developers who juggle both personal and professional projects. It becomes even more complex when you want to use differe...
Have you ever built a React app only to realize that users from different countries can't use it effectively because it only supports English? In this tutorial, you'll learn how to build truly global React application using internationalization (i18n...
In this article, we will see how we can pass extra data while redirecting to a different route in React that uses react-router-dom library.
So let’s get started.
Normally we use the Link component from react-router-dom as shown below:
<Link to="/register">Register</Link>
So when we click on the Register link, it will redirect to the /register route. But Link also allows us to pass additional data while redirecting.
<Link to={{
pathname: "/register",
state: data_you_need_to_pass
}}>
Register
</Link>
Here, at the place of data_you_need_to_pass, we can pass a string or object, array and so on and in the /register route we will get that data in props.location.state.
Instead of naming the variable as state, we can use any name but it’s generally called state.
Normally, to redirect using the push method, we use it like this:
props.history.push('/register');
If you need to do some processing before sending the data like removing some values or to trim the values or make some API call, we can call a handler on the submit button click and pass data as shown below:
props.history.push({
pathname: '/register',
state: data_you_need_to_pass
});
That’s it for today. I hope you learned something new.
I hope you've been enjoying my articles and tutorials I've been writing. If you found them useful, consider buying me a coffee! I would really appreciate it.
Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.