Q1. How do you define routes in React Router v6?
In v6, you use
Example:
<Routes> and <Route> with element prop.Example:
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
Routes component ensures only one route matches.Q2. What is the Link component used for?
It renders an
Example:
It also provides accessibility features.
Link is used for navigation.It renders an
<a> tag but intercepts clicks to prevent full page reload.Example:
<Link to="/about">About</Link>.It also provides accessibility features.
Q3. What is the difference between Link and NavLink?
You can use
It's useful for navigation menus.
NavLink is a special version of Link that adds styling attributes when it matches the current URL.You can use
className or style functions to apply active styles.It's useful for navigation menus.
Q4. How do you handle nested routes?
In v6, nested routes are defined by placing
The parent component should render an
Example:
<Route> inside a parent <Route> element.The parent component should render an
<Outlet /> where child routes are rendered.Example:
<Route path="/users" element={<Users />}>
<Route path=":id" element={<User />} />
</Route>
Q5. What is the useNavigate hook?
Example:
useNavigate returns a function that lets you navigate programmatically.Example:
const navigate = useNavigate(); then navigate('/about') or navigate(-1) to go back.