We’re going to use react-router to redirect in React.
Specific Examples
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
- Create a variable to store the result of useNavigate() hook.
- 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
- Create a variable to store the function returned by useNavigate() hook.
- 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.