This article explains how to navigate the React router programmatically. I have presented examples in react-router-dom v5 and v6.
Programmatic navigation in react-router-dom v6
The react-router-dom V6 useNavigate allows three basic navigation types.
The usage is const navigate = useNavigate()
- Navigate to a specific URL.
navigate("/about") - Navigate to the previous page. That is the equivalent of the browser back button.
navigate(-1) - Navigate to the next page (in history). That is the equivalent of the browser forward button.
navigate(1)
Listed below is an example of react-router-dom V6. The example includes both regular routes and programmatic routes.
import { BrowserRouter, Link, Route, Routes, useNavigate } from 'react-router-dom';
export const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />}/>
<Route path="contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}
export default App;
const Home = () =>{
const navigate = useNavigate();
const navigateTo = (url: string) => {
navigate(url)
}
return(
<div>
<p>Home</p>
<p><button onClick={() => navigateTo("about")}>Programatically Navigate to About</button></p>
<p><Link to="/contact">Contact</Link></p>
</div>
)
}
const About = () =>{
const navigate = useNavigate();
const navigateTo = (url: string) => {
navigate(url)
}
return(
<div>
<p>About</p>
<p><button onClick={() => navigateTo("/")}>Programatically Navigate to Home</button></p>
<p><Link to="/contact">Contact</Link></p>
</div>
)
}
const Contact = () =>{
const navigate = useNavigate();
const navigateTo = (url: string) => {
navigate(url)
}
return(
<div>
<p>Contact</p>
<p><Link to="/">Home</Link></p>
<p><button onClick={() => navigateTo("/about")}>Programatically Navigate to About</button></p>
</div>
)
}Programmatic navigation in react-router-dom v5
The react-router-dom V5 uses useHistory. The useHistory has been replaced with useNavigate in V6. The usage of useHistory is similar to useNavigate.
The usage is const history = useHistory()
- Navigate to a specific URL.
history.push("/about") - Navigate to the previous page. That is the equivalent of the browser back button.
history.push(-1) - Navigate to the next page (in history). That is the equivalent of the browser forward button.
history.push(1)
Below is an example of react-router-dom V5. The example includes both regular routes and programmatic routes.
import { Switch , Link, Route, useHistory, BrowserRouter } from "react-router-dom"
export const App = () => {
return (
<BrowserRouter>
<Switch>
<Route path="/"><Home/></Route>
<Route path="about"><About /></Route>
<Route path="contact"><Contact /></Route>
</Switch>
</BrowserRouter>
);
}
export default App;
const Home = () =>{
const history = useHistory();
function navigateTo(url: string) {
history.push(url);
}
return(
<div>
<p>Home</p>
<p><button onClick={() => navigateTo("about")}>Programatically Navigate to About</button></p>
<p><Link to="/contact">Contact</Link></p>
</div>
)
}
const About = () =>{
const history = useHistory();
function navigateTo(url: string) {
history.push(url);
}
return(
<div>
<p>About</p>
<p><button onClick={() => navigateTo("/")}>Programatically Navigate to Home</button></p>
<p><Link to="/contact">Contact</Link></p>
</div>
)
}
const Contact = () =>{
const history = useHistory();
function navigateTo(url: string) {
history.push(url);
}
return(
<div>
<p>Contact</p>
<p><Link to="/">Home</Link></p>
<p><button onClick={() => navigateTo("/about")}>Programatically Navigate to About</button></p>
</div>
)
}
