React is a very popular tool for building web applications, but it alone isn’t enough to build a fully-fledged web app. It’s only a UI library for building interfaces, but you also need additional tools for essential features like routing. For that, React developers often use react-router library that provides all essential features.
What is react-router
As is typical for React library, react-router provides custom components you can incorporate into your app to do what you need. For example, you use <Route> components to specify the route that displays specific set of components. <Link> components, when clicked, take users to a specified URL. They work like a normal anchor tag in HTML, except they don’t reload the page. <Link> components are optimized for single page applications. As you know, in SPAs, everything is loaded on one page, hence their name Single Page Applications. However, moving through different URLs displays different components and hides others. This creates the illusion of normal browsing experience, where you go from one page to another to see what you need.
Redirect in React
Now, let’s talk about the main topic. There are a number of ways to redirect in React. Some are declarative, some programmatic. A blog post on SimpleFrontEnd explores this topic very well, but I’ll try to add my 2 cents.
A declarative way to redirect in React involves using the <Navigate> component. Sixth version of react-router provides this component. If your application renders a Navigate component, users will be redirected to the URL specified in the to attribute.
Naturally, you don’t want users to always be redirected to another page. So you can use curly braces inside JSX to conditionally render <Navigate> component. You set up a condition, and render <Navigate> only when it is met. Here’s a guide where they explore this approach. The condition can be based on a state value (tied to the user’s inputs) or any JavaScript expression.
This is great, but some React developers consider this approach to be difficult to follow. Instead, you can do the same by simply using normal functions in JavaScript.
The latest version of react-router library also provides useNavigate hook. It returns an instance of a function you can use to redirect users to a specified URL. First, you create a variable and set it to a navigate function. Afterward, you can call this variable with a string argument that specifies the URL path for redirection.
Let’s look at an example:
const redirect = useNavigate()
<onClick={() => redirect(‘/homepage’}>Click to redirect</button>
As you can see, this is a much better way to redirect users after clicking a button. A normal <Navigate> component would require a number of additional steps. For example, a state variable that holds a Boolean value, which determines whether user should be redirected or not.
You can now use redirect() function to redirect users whenever it’s called. In the example, you simply call a function whenever a click event happens. It’s also more readable than having a custom <Navigate> component with a conditional rendering expression embedded in JSX. You can use this function in other event handlers like onSubmit, to redirect user once they submit the form.