README.md

Day 17 - 30 Days Of React
React Router

<< Day 16 | Day 18 >>

• React Router
• Exercises
  • Exercises: Level 1
    • 1. What package do you use to implement routing in react?
    • 2. What is the default export in react-router-dom?
    • 3. What is the use of the following Components(Route, NavLink, Switch, Redirect, Prompt)
  • Exercises: Level 2

React Router

Exercises

Exercises: Level 1

1. What package do you use to implement routing in react?

react-router-dom

2. What is the default export in react-router-dom?

3. What is the use of the following Components(Route, NavLink, Switch, Redirect, Prompt)

Here are the main components of react-router-dom version 6:

• BrowserRouter: This component is used to wrap your application and provide routing functionality to it. It should be used once at the top level of your application.

• Routes: This component is used to define the routes for your application. It should be used inside the BrowserRouter component.

• Route: This component is used to define a single route in your application. It should be used inside the Routes component.

• Link: This component is used to create links between different routes in your application. It should be used instead of the standard HTML <a> tag.

• Outlet: This component is used to render the child routes of a parent route. It should be used inside the Route component.

Here is an example of how to use these components to create a simple application with nested routes:

import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';

function App() {
	return (
		<Router>
			<nav>
				<ul>
					<li>
						<Link to="/">Home</Link>
					</li>
					<li>
						<Link to="/about">About</Link>
					</li>
				</ul>
			</nav>

			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/about" element={<About />}>
					<Route path="/" element={<AboutPage />} />
					<Route path="/contact" element={<Contact />} />
				</Route>
			</Routes>
		</Router>
	);
}

function Home() {
	return <h1>Home</h1>;
}

function About() {
	return (
		<div>
			<h1>About</h1>
			<Outlet />
		</div>
	);
}

function AboutPage() {
	return <h2>About Page</h2>;
}

function Contact() {
	return <h2>Contact</h2>;
}

export default App;

Exercises: Level 2

Now, you know about React router. Build your portfolio with React and implement React router for navigation.

Back to top ⬆️