Hey everyone, we have already discussed how to start with React in the previous article. In this article, we are going to learn one essential feature of your application is navigation between different components i.e. Routes in ReactJS.
This is where React Routers come into play. React Routers are a standard library for routing in React, enabling navigation among views and keeping the UI in sync with the URL.
In this detailed guide, we will explore the ins and outs of React Routers, how to install them, and how to implement them in your React application.
What are React Routers?
React Routers provide a way to handle navigation in a React application. They allow you to define routes and render different components based on the current URL.
React Routers keep the UI in sync with the URL, enabling users to navigate through different views without having to reload the entire page. This enhances the user experience and makes the application feel more like a traditional website.
Installing React Routers
Before we go into using React Routers, we need to install the necessary dependencies. In your terminal, navigate to your project directory and run the below command:
1 2 3 | npm install react-router-dom |
This command installs the react-router-dom package, which is the most commonly used package for React Routers.
Importing React Router Components
To start using React Routers in your application, you need to import the necessary components from the react-router-dom package. The main components we will be using are BrowserRouter, Routes, Route, and Link. Add the following import statement to your code:
1 2 3 | import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; |
These components will be used to define routes, render components based on the current URL, and create links for navigation.
Understanding the React Router Components
Let’s take a closer look at the main components involved:
BrowserRouter
The BrowserRouter component is a router implementation that uses the HTML5 history API to keep your UI in sync with the URL. It is the parent component that wraps all other components involved in routing.
Routes
The Routes component is a new addition in React Router v6. It is an upgrade to the previous Switch component. The main advantage of Routes over Switch is that routes are chosen based on the best match instead of being traversed in order. This makes it more flexible and efficient when handling complex route configurations.
Route
The Route component is responsible for conditionally rendering a component based on the current URL. It takes a path prop, which specifies the URL pattern to match, and an element prop, which specifies the component to render when the URL matches the path.
Link
The Link component is used to create links to different routes within your application. It works similarly to an HTML anchor tag, allowing users to click on the link and navigate to a specific route.
Implementing React Routers in Your Application
Now that we have a good understanding of React Routers, let’s move to the implementation.
We will create a simple application with three components: a home component, an about component, and a contact component. So, users will be able to navigate between these components using React Routers.
Creating the Components
In your project directory, create a folder named “components” inside the “src” folder. Inside the components folder, create three files: Home.js, About.js, and Contact.js. Here’s a basic structure for each component:
Home.js:
1 2 3 4 5 6 7 8 9 10 11 | import React from 'react'; function Home() { return ( <h1>Welcome to the world of React Routers!</h1> ); } export default Home; |
About.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React from 'react'; function About() { return ( <div> <h2>Learn more about React Routers</h2> <p>React Routers are a powerful tool for handling navigation.</p> </div> ); } export default About; |
Contact.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React from 'react'; function Contact() { return ( <div> <h2>Contact Us</h2> <p>Feel free to reach out to us.</p> </div> ); } export default Contact; |
Setting up the Router
Now, let’s set up the router in our main App component. Import the necessary components from react-router-dom and the three components we created earlier. Here’s an example of how the “App.js” file should look:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; import Contact from './components/Contact'; import './App.css'; function App() { return ( <Router> <div className="App"> <ul className="App-header"> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </div> </Router> ); } export default App; |
In this code, we import the necessary components and set up the basic structure of our application.
Testing the Navigation
Now that we have set up the router, let’s test the navigation in our application. Start the development server by running the following command:
1 2 3 | npm start |
Open your browser and navigate to http://localhost:3000. You should see the home component rendered by default. Click on the links in the header to navigate to the About and Contact components. The URL will change accordingly, and the corresponding component will be rendered.
Congratulations! You have successfully implemented navigation in your React application using React Routers.
Now that you have a solid understanding of React Routers in the application, you can explore more advanced features and configurations to further customize your application’s navigation.
I hope you enjoyed the article and if you found this useful, then please share it with your friends and colleagues.
If you have any queries please feel free to post them in the comments section or anything that you wanted to ask through mail contact.
Happy coding! 😉.
Also read,
- How to start and setup the ReactJS project? – A full Beginner guide
- What are the Top Skills for Frontend Developer that you must know in 2022?
- What are the events in Javascript? How does the event function work?
