React Router is a popular routing library for React applications. It's helpful because it enables dynamic, client-side routing in single-page applications (SPAs). This allows developers to create a seamless user experience by rendering different components based on the URL without full page reloads. React Router manages navigation, enables deep linking, and supports nested routes, making it easier to build complex, multi-view applications while maintaining a clean and organised codebase.
1)Lets install React router dependency:
npm i react-router-dom
2) Create components folder in the src and add few files such as About.js, Navbar.js, Hello.js and include another file to track our route information named as MyRouteInformation.js
3)Setup the MyRouteInformation.js file accordingly
createBrowserRouter function in React Router is used to set up client-side routing for React applications. It utilizes the HTML5 history API to manage navigation, enabling smooth transitions between different pages or components without a full page reload. By using createBrowserRouter, developers can define routes and link them to specific components, ensuring the URL updates accordingly. This function helps maintain the application's state and the browser's history in sync, providing a seamless user experience similar to traditional multi-page applications. It's a key tool for implementing dynamic routing in modern web apps.
4)Make changes to index.js file
RouterProvider is a crucial component in react-router-dom that provides the routing context for the entire application. It works in tandem with a router instance created by functions like createBrowserRouter or createMemoryRouter. When you wrap your application's component tree with RouterProvider, it allows the routing logic defined in your router instance to take effect. This setup ensures that the correct components are rendered based on the URL, and it manages navigation and history, making it easier to implement complex routing schemes in React applications.
5) We can add multiple routes as shown in the image and access them using the path.
6) Finally the setup is done and we can access the different pages with the paths.
Navigation
8) We can navigate from the page using the Name of Tag tag
- import Link from react-router-dom
Github Link: https://github.com/rajeshsilvoj/React-Routing-V6
Top comments (0)