We’re going to use react-router to redirect in React.

Redirect to another page with useNavigate() hook

react-router version 6 provides a useNavigate() hook, which returns a function that navigates to the path provided as a string argument..

Here’s an example:

const navigate = useNavigate()

navigate("/error")

There are multiple ways to redirect with useNavigate() hook in React.

Redirect to another page with <Navigate> component

react-router version 6 also provides the <Navigate> component. When rendered, <Navigate> redirects users to the path specified in the to prop.

You can use the <Navigate> component in both – functional and class components. It is especially useful for the latter, because class components don’t support hooks.

Let’s look at an example:

class Redirect extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     shouldRedirect: false
   };
 }
 render() {
   return (
     <div>
       <form onSubmit={() => this.setState({ shouldRedirect: true })}>
         <input placeholder="Name"></input>
         <input placeholder="Surname"></input>
         <button type="submit">Submit</button>
       </form>
       {this.state.shouldRedirect ? (
         <Navigate replace to="/successfully-submitted" />
       ) : null}
     </div>
   );
 }
}

In this example, the onSubmit event handler does not directly call the navigation function.

Instead, it sets shouldRedirect state property to true.

In JSX, ternary operator evaluates shouldRedirect, which is a boolean. When true, it renders the <Navigate /> component, which redirects users to the “/successfully-submitted” path.

Redirect to another page on form submit

1. Create a variable to store the result of useNavigate() hook.

2. Set onSubmit prop to event handler that calls the function.

Let’s look at an example:

export default function App() {
 const navigate = useNavigate();
 return (
   <form onSubmit={() => navigate("/successfully-submitted")}>
     <input placeholder="Name"></input>
     <input placeholder="Surname"></input>
     <button type="submit">Submit</button>
   </form>
 );
}

We have a simple form with two input fields and a button that submits the form.

Once submitted, the onSubmit event handler redirects users to the ‘/successfully-submitted’ page.

Redirect to another page on button click

1. Create a variable to store the function returned by useNavigate() hook.

2. Set onClick prop to event handler that calls the function.

Let’s look at an example:

export default function App() {
 const navigate = useNavigate();
 return (
   <div className="App">
     <Link to="/dashboard">Dashboard</Link>
     <button onClick={() => navigate("/")}>Sign Out</button>
   </div>
 );
}

Clicking the ‘Sign Out’ button will redirect users to the homepage (‘/’ path).

Conditionally redirect to another page in React

In the previous example, we conditionally rendered the <Navigate /> component that redirects users to a different page.

We can also conditionally call the function returned by useNavigate() hook. Let’s look at an example:

export default function App() {
 const [shouldRedirect, setShouldRedirect] = useState(false)
 const navigate = useNavigate();
 return (
   <div className="App">
     <Link to="/dashboard">Dashboard</Link>
     <button onClick={() => shouldRedirect ? navigate("/") : null}>
Sign Out</button>
   </div>
 );
}

In this example, navigate() function is called only if shouldRedirect is true. There are many practical use cases for conditional redirect in React. For example, redirect users to ‘/dashboard’ only if they are successfully authenticated.

You can also conditionally redirect to one path (for example ‘/success’) or another (‘/error’).

Here’s an example:

export default function App() {
 const [condition, setCondition] = useState(false)
 const navigate = useNavigate();
 return (
   <div className="App">
     <Link to="/dashboard">Dashboard</Link>
     <button onClick={() => condition ? navigate("/success") : navigate("/error")}>
Sign Out</button>
   </div>
 );
}

If condition evaluates to true, then clicking the button redirects to “/success” path. If not, it redirects to “/error” path.