Notes

Introduction to Routing in React Router v6
React Router v6 is a powerful library for managing navigation and routing in React applications. It allows you to define routes in your app, enabling users to navigate between different pages or components. Below are the steps and an example to help you implement routing in React using version 6.

Step-by-Step Guide
1. Install React Router
First, you need to install the React Router library in your React project:

bash
Copy code
npm install react-router-dom
2. Set Up BrowserRouter
In your main application file (usually index.js or App.js), wrap your application with BrowserRouter. This component is responsible for keeping your UI in sync with the URL.

javascript
Copy code
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
3. Define Routes
In your App.js or another component, use the Routes and Route components to define your routes.

javascript
Copy code
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}

export default App;
Explanation:
Routes: This component is a container that holds all the Route components.
Route: Defines a single route. It takes two main props:
path: The URL path for the route.
element: The component to render when the route matches the URL.
4. Create Components
Create the components that will be rendered when navigating to different routes:

javascript
Copy code
// Home.js
import React from 'react';

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

export default Home;

// About.js
import React from 'react';

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

export default About;

// Contact.js
import React from 'react';

function Contact() {
return <h1>Contact Page</h1>;
}

export default Contact;
5. Navigate Between Routes
You can navigate between routes using the Link component or useNavigate hook.

Using Link:
javascript
Copy code
import { Link } from 'react-router-dom';

function Navigation() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
);
}

export default Navigation;
Using useNavigate:
javascript
Copy code
import React from 'react';
import { useNavigate } from 'react-router-dom';

function Home() {
const navigate = useNavigate();

return (
<div>
<h1>Home Page</h1>
<button onClick={() => navigate('/about')}>Go to About</button>
</div>
);
}

export default Home;
6. 404 Not Found Page
You can handle non-existent routes by adding a route without a path that renders your custom 404 page.

javascript
Copy code
function NotFound() {
return <h1>404 - Not Found</h1>;
}

function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<NotFound />} /> {/* Catch-all route */}
</Routes>
</div>
);
}

export default App;
Summary
Installation: Install react-router-dom via npm.
BrowserRouter: Wrap your app with BrowserRouter.
Routes: Define your app's routes with the Routes and Route components.
Navigation: Use Link or useNavigate for navigating between routes.
404 Handling: Use a catch-all route to display a 404 page.
This should give you a solid foundation for implementing routing in your React application using React Router v6.