If you want to link another page on your website or navigate users to a given webpage, you have to use page redirect. In React, there are multiple ways to redirect to another page.
In this article, we will discuss all the possible ways. And after reading this article. You'll know exactly how to redirect to another page in React.
To redirect to another page in React, you can use:
- HTML anchor element
- window.location
- React
useNavigatefunction - React
history.pushfunction
They essentially all do the same thing, but it's important to know when should you use each method. And that's exactly what you're gonna learn if you continue reading this article.
So without any further ado, let's get started.
Redirect to Another Page in React
As we already mentioned, there are plenty of ways to redirect to another page in React. In this section, We'll demonstrate all of them. And you can pick the one that suits your use case the most.
tip
It's good to always remember all the options of redirecting. And applying the correct one to your given use case.
Redirect Using Anchor
Anchor is a way of navigating between pages using plain HTML.
The
aHTML element with itshrefattribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address. (source: MDN)
The anchor can be used to link to anything that can be addressed by a URL. We can also use target property to open a new page in a new tab or stay on the same page.
Using anchor to redirect
<html lang="en">
<head>
<title>Anchor redirect</title>
</head>
<body>
<a href="/another-page">Internal link</a>
<a href="https://another-website.com" target="_blank">External link</a>
</body>
</html>caution
Redirecting with anchor will always reload the whole React application from scratch, which is not a performant solution. For this reason, we only recommend using anchor when linking to an external website.
Redirect Using Window
The window is used to navigate between pages using JavaScript.
The Window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. (source: MDN)
The window can be used to navigate users between pages or to link to external websites.
Using window to redirect
// Using window.location
window.location = "https://another-website.com"
// Using window.open to link between domain
window.open("/another-page")
// Using window.open to link to another page
window.open("https://another-website.com", "_blank")caution
Opening a new page using window will always reload the whole React application from scratch. For more performant options, we recommend using React Router.
Redirect Using Router
If it's possible, you should always aim to use React Router for navigating between pages. React router is using client-side routing techniques to provide the best performance for your React application.
React Router is a collection of React components, hooks, and utilities that make it easy to build multi-page applications with React. (source: React Router)
Using React Router, we can use Link component to perform a redirect or use a hook function to perform redirect programmatically.
React Router v6
import { Link, useNavigate } from "react-router-dom";
const App = () => {
const navigate = useNavigate();
const anotherPage = () => navigate("/another-page");
return (
<div>
<Link to="/another-page">Another Page</Link>
<button onClick={anotherPage}>Another Page</button>
</div>
);
};
export default App;React Router v5
import { Link, useHistory } from "react-router-dom";
const App = () => {
const { push } = useHistory();
const anotherPage = () => push("/another-page");
return (
<div>
<Link to="/another-page">Another Page</Link>
<button onClick={anotherPage}>Another Page</button>
</div>
);
};
export default App;tip
React router is a great way to navigate between pages in React application. However, it can't be used to navigate to a page outside your website domain.
In this section, we listed different ways to redirect to another page in React. In my opinion, React Router is by far the best option to use, however, there are certain use cases when it's not possible to use it. For these situations, it's always good to remember other options we have in our arsenal.
Moving Data From One Page to Another
Now that we know how to navigate between different pages, it's also good to know how to share data between them. It's a typical situation when we want to take our users to a different page, but we also want to pass some information from the original page.
Luckily for us, we have multiple options to do so.
Sharing Data Using Query Parameters
The simplest way to share data between pages is by using query parameters. An example of how to do that is demonstrated in the code sample below.
Using query parameters
<html lang="en">
<head>
<title>Anchor redirect</title>
</head>
<body>
<a href="/another-page?param1=hello¶m2=world">Internal link with parameters</a>
</body>
</html>Sharing Data With React Router
React Router has direct support for sharing state when navigating. An example of how to do that is demonstrated in the code sample below.
Sharing state with React Router
import { Link, useNavigate } from "react-router-dom";
const App = () => {
const navigate = useNavigate();
const anotherPage = () =>
navigate("/another-page", { state: { foo: "bar" } });
return (
<div>
<Link to="/another-page" state={{ foo: "bar" }}>
Another Page
</Link>
<button onClick={anotherPage}>Another Page</button>
</div>
);
};
export default App;
As we can see in the examples above, sharing a state between pages is nothing to be afraid of. In fact, it can be easily achieved with a few lines of code.
Concluding Thoughts
Page redirection is an important technique, and it's safe to say that it's being used on every single website on the internet. When it comes to page redirection, we can redirect:
- To a page on the same website
- To a page on another website.
In this article, we showed you different ways to redirect to another page in React. And you learned when should you use each discussed method. At this point, you can start calling yourself a React redirect expert.
And now, the only thing left to do is to start implementing redirection to your website.