React Router - useNavigate
To work with Router in React first install react-router-dom dependency as
npm install react-router-dom
Then import required router components as:
import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom"
- All BrowserRouter is a primary component which consists of all the routes on a browser
- Routes: An application can have multiple routes having different path
- Route: It provides the actual path to a component, when the path matches it returns the component
- Link: creates links inside HTML DOM
Example:
const PageRoutes = () => {
return(
<Router>
<Routes>
<Route path="/" element = {<Home />} />
<Route path ="/html" element = {<Html />} />
<Route path="/java" element = {<Java />} />
<Route path="*" element = {<Default />} />
</Routes>
</Router>
);
}
Note: path = * means that it will catch all urls which do not match.
Home.js
const Home = () => {
return(
<>
<nav>
<Link to = "/html" >HTML </Link>
<Link to = "/java" >JAVA </Link>
</nav>
<Outlet />
</>
);
}
Outlet: Outlet component is where all the child component matching child route will render.
From react-router v6, we can also provide nested route as
Example:
const PageRoutes = () => {
return(
<Router>
<Routes>
<Route path="/" element = {<Home />} />
<Route path ="/html" element = {<Html />} />
<Route path="/java" element = {<Java />} />
<Route path="/databases" element = {<Default />} >
<Route path ="/sql" element = {<Sql />} />
<Route path="/mongo" element = {<MongoDB />} />
</Route>
</Routes>
</Router>
);
}
We can pass route parameter as well
<Route path="/user/:id" element = {<User />} />
To access parameter in User component use useParam( )
User.js
const User = () => {
let params = useParam();
return(
<p>UserId : { params.id }</p>
);
}
To programmatically navigate from one component to another: useNavigate() hook is introduced
useNavigate() hook returns a function in which you can pass the path url
let navigate = useNavigate();
const onSubmit = () => {
navigate("/user"+ id);;
}
Note: NavLink component of react-router-dom allows us to detect active link in react application.
Example: <NavLink to ="/path" style ={({isActive})=>{
return isActive?activeStyle: null;
}}>Home</NavLink>
We can also use activeClassName attribute to assign a class or style when the link is active.
Comments
Post a Comment