Getting Started with React Router V6
In this tutorial, we will learn how to set up and use React Router version 6 for basic routing in a React application.
Setup
First, let’s install React Router v6 by running the following command in our terminal:
npm install react-router-dom@v6
Once the package is installed, we can then import it and set up our basic routing in our App.js file as follows:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Route path="/" element={} />
<Route path="/about" element={} />
<Route path="/contact" element={} />
);
}
Here, we have imported the necessary components from react-router-dom and used them to set up our basic routes for the Home, About, and Contact components.
Basic Routing
With our setup complete, we can now create the Home, About, and Contact components and add content to them.
When we run our application, we can navigate to the /, /about, and /contact paths in our browser to see the content of each component rendered based on the route.
Conclusion
Congratulations! You have now learned the basics of setting up and using React Router version 6 for basic routing in a React application. This will allow you to create multi-page applications with different routes and components, providing a smooth and seamless user experience.
Thank you for following along with this tutorial. Happy coding!
Tq so much sir❤❤