27
loading...
Programmatic Navigation in React using react-router-dom
I was trying to make a redirect to somewhere else after submitting a form, and by looking at the developers communities for a solution to do so, unfortunately, most of them only show the way using the Link component and have already been removed from this react version@6, and after looking at the react router official website I got the answer.
This blog mainly aims to be a refuge to those people who come here looking for the answers to this problem.
The useNavigate hook returns a function that lets you navigate programmatically, which it returns a function has two signatures
for example after a form is submitted.
import { useNavigate } from 'react-router-dom';
export const SignupForm = () => {
let navigate = useNavigate();
async function handleSubmit(event) {
event.preventDefault();
await submitForm(event.target);
navigate("/success");
}
return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}An object to store on location state. This is useful for state that doesn’t need to be in the URL but is associated with a route transition. Think of it like “post” data on a server.
const NewTodo = () => (
<TodoForm
onSubmit={async todo => {
let id = await createNewTodo(todo)
// put some state on the location
navigate("/todos", { state: { newId: id } })
}}
/>
)
const Todos = props => (
<div>
{todos.map(todo => (
<div
style={{
background:
// read the location state
todo.id === props.location.state.newId
? "yellow"
: ""
}}
>
...
</div>
))}
</div>
)Normally a call to navigate will push a new entry into the history stack so the user can click the back button to get back to the page. If you pass replace: true to navigate then the current entry in the history stack will be replaced with the new one.
An example is when the user clicks a “purchase” button but needs to log in first, after they log in, you can replace the login screen with the checkout screen you wanted them to be at. Then when they click the back button they won’t see the login page again.
navigate("/some/where", { replace: true })also you can check react router website Link
27