React Router

React router helps you manage the flow of data through your apps, sending information where it needs to go.

Http Requests

Context API

React

React Router

Loading video...

Installing and using React Router v6 (in Hindi)

Concepts

Installing and using React Router v6 (in Hindi)

Working with Link and NavLink (in Hindi)

Dynamic Routing and useParams hook (in Hindi)

Nested routing and useLocation hook (in Hindi)

Query parameters and useSearchParams hook (in Hindi)

Programmatic navigation using useNavigate hook and Redirecting the user (in Hindi)

404 Not Found Page (in Hindi)

HashRouter vs BrowserRouter in React Router v6 (in Hindi)

Watch the full video to earn 3

Quizzes

What is the command to install React Router package that's used in the videos?

npm install react-router

npm install react-router-dom

npm install router

npm install router-react

Question 1 of 16

per question

What is the purpose of <Link /> component in React Router when we already have <a> anchor tags in HTML?

<Link /> is more optimized than <a> tag

<Link /> is used to navigate to internal links whereas <a> tag is used for external links

<Link /> can be styled but <a> tag cannot be styled

Question 1 of 16

per question

Which prop is used in <Link /> component to specify the path?

to

href

path

url

Question 1 of 16

per question

Which of these statements are true about <Routes> and <Route> component in React Router v6?

<Route> renders the given component if its path matches the current URL.

Whenever the location changes, <Routes> looks through all its children <Route> elements to find the best match and renders that branch of the UI.

All <Route> components must be wrapped in a <Routes> component

<Routes> renders the given component if its path matches the current URL.

Question 1 of 16

per question

Which prop is used in <Route /> component to specify the path?

to

href

path

url

Question 1 of 16

per question

Which prop is used in <Route /> component to specify the component to render if path matches?

component

element

render

item

Question 1 of 16

per question

What are the differences between <Link /> and <NavLink />?

<NavLink /> is outdated and <Link /> replaces it.

<NavLink /> cannot be used with HashRouter but <Link /> can be used.

<NavLink /> provides a state which tells us if current route matches with the given link, whereas <Link /> does not.

Question 1 of 16

per question

What hook allows us to easily use dynamic URL parameters in React Router v6?

useParams

useLocation

useSearchParams

Question 1 of 16

per question

What hook should be used if we want to perform some side effect whenever the current url changes?

useParams

useLocation

useSearchParams

Question 1 of 16

per question

What are some of the use cases of query parameters?

To remember some application view state in URL

To generate easily sharable and bookmarkable URLs

To shorten the URLs

To store sensitive data in URL

Question 1 of 16

per question

What do we mean by programmatic navigation?

when a user press back or forward button

when a user is redirected as a after they click a link

when a user reloads the page

when a user is redirected as a result of an action that occurs on a route

Question 1 of 16

per question

How do you implement "back button" functionality of browser using useNavigate hook?

useNavigate("previous")

useNavigate(-1)

useNavigate("back")

useNavigate(1)

Question 1 of 16

per question

Which of these are good examples of scenarios where programmatic navigation can be used?

When user submits a form on login page

When a guest user tries to visit a protected page

When user wants to click on an external link

When user wants to close the current tab

When we want to redirect the user based on some condition

Question 1 of 16

per question

Which of these paths will match with the URL https://dev11.in/topics/react-router?

"/"

"/*"

"/topics/*"

"/react-router"

Question 1 of 16

per question

Select all the statements that are true about the following code in React Router v6:

<Route path="/apple">
  <Route path="/" element={<ApplePage />} />
  <Route path="*" element={<Navigate replace to="/apple" />} />
</Route>

<ApplePage /> will be rendered if we go to /apple route.

<ApplePage /> will NOT be rendered if we go to /applebanana route.

<ApplePage /> will be rendered if we go to /applebanana route.

<ApplePage /> will be rendered if we go to /appl route.

Question 1 of 16

per question

Select all the statements that are true about <HashRouter> and <BrowserRouter> in React Router v6:

<HashRouter> uses hash portion of URL whereas <BrowserRouter> uses HTML5 History API of browsers.

Both are compatible with legacy browsers.

<HashRouter> is compatible with legacy browsers whereas <BrowserRouter> is not always compatible.

<BrowserRouter> is compatible with legacy browsers whereas <HashRouter> is not always compatible.

<HashRouter> is often used for static servers like GitHub.io server

Most of the time, <BrowserRouter> is preferred over <HashRouter> to have user friendly URLs.

Question 1 of 16

per question