In this blog we ‘ll learn about the react routing. Routing is the very common and useful feature we use in web apps. All webapps have this routing feature. When we saw any link on a webpage and when we click on that link we see that content change according to the nav link. Say if we have some link like Home, Contact, About on our web application. And each link has a dedicated page or component to display. To handle this scenario routing come into the picture.
We know that we use react to create a single page application. Single page application means when we click on any navigation link our page do not refresh it’s just change the content dynamically without refreshing the whole web page. In react we use client side routing to achieve this single page functionality.
We ‘ll use React Router v6 for achieving react routing. We ‘ll cover the react routing in very detail. Let’s start now. We ‘ll use Visual Studio Code IDE for this example. You can use the same or any other IDE as of your choice.
What we ‘ll cover
- React routing using React Router v6.
- Navigation for invalid link in React Routing.
Let’s start coding now. First of all we have to create a react project. We are creating the react project using CRA(create-react-app). After creating the project we have to install the react-router-dom npm package.
Use below command to create react project.
npx create-react-app react-routing-example
This command take some time. Just wait and after some time you ‘ll see a directory ‘ll be created with the name you given. Go to inside that directory and write below command. it ‘ll open your project in visual studio code IDE.
cd react-routing-example
code .

Install React Router Dom
In visual studio code you can see your project. It’s time to install the react-router-dom npm package in our application. Open the terminal in visual studio code and run the below command.
npm install react-router-dom


After running above command just verify if this npm package of react-router-dom is successfully install or not. You can open package.json file you can see inside the dependency section. And other way is just expand the node_modules package and search for your module here.


Project Description
Let’s discuss what we are going to develop in this example. In this example we just create some link say Home, Contact, About. And for each link we define a dedicated react component. Once you click on this links you can see the dedicated react component loading dynamically. We are using client side routing so that web page ‘ll not refresh when we navigate between links.
Project Code Implementation
Let’s start now and create the react component for Home About and Contact. We ‘ll create a folder call components inside our root folder. And create these react components inside that.

Home.js
function Home() {
return (
<div>
<h1>Home Component</h1>
</div>
);
}
export default Home;
Code language: JavaScript (javascript)
Contact.js
function Contact() {
return (
<div>
<h1>Contact Component</h1>
</div>
);
}
export default Contact;
Code language: JavaScript (javascript)
About.js
function About() {
return (
<div>
<h1>About Component</h1>
</div>
);
}
export default About;
Code language: JavaScript (javascript)
We have created all three components. It’s time to do the changes in our App.js file. Go to the App.js file and create the navigation links for this. If you remember we created only three components Home About and Contact. So we ‘ll create link for these three component. But as we mentioned above we also cover the routing for any invalid URL. So in our App.js file we ‘ll create one more route with path *. This means if the route we are searching doesn’t match with the define route then this route ‘ll trigger and show our custom message. We ‘ll see about this later in our blog.
App.js
import { Link, Route, Routes } from 'react-router-dom';
import './App.css';
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
function App() {
return (
<div>
<nav>
<Link to="/">Home</Link> | <Link to="/about">About</Link> |
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}
export default App;
Code language: JavaScript (javascript)
Make sure about your imports. As you are using other component in your App.js file make sure that they import from right location. And also make sure about imports for Link, Route and Routes they all import from react-router-dom.

Now we are just one step away from our working example. Now just go to your index.js file and use the BrowserRouter for App component while rendering.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
Code language: JavaScript (javascript)

We are done. See how simple it is to use react routing. It’s time to see if everything is working or not. just run your project and access the url for your application. Use below command to run your react project.
npm start

wait for some time after running above command. You ‘ll see something like below on your terminal once react application start.

You can see two URL after your react application started. One is local and other is on your network. you can use any one of them to access on your computer.


On Your Network URL in React
you can see on our computer both the URL are giving the same response. On Your Network URL is use for if any other device on same network want to access our application they can access that by this URL. For example if your mobile is connected to the same Wi-Fi network as your computer, you can access the application on your mobile also. Just open the browser on your mobile and hit the given URL you can see the response. Generally we use this to check responsiveness of our react application on mobile or tab by connecting them on same network.
Second way is in your command prompt type ipconfig command and look for the IPv4 Address. If your laptop where your react application is running and your mobile or any other device connect to the same wi-fi network then you can access the react application using this url. In that case your url ‘ll be http://<IPv4 Address>: 3000. So our address ‘ll become like below.
http://192.168.1.5:3000
Code language: JavaScript (javascript)

React routing result
Application is up and running. Try to validate now just click on each link and see after click on the link dedicated component is rendering or not. Check for all three link. After that just change the URL in your browser like any random string you ‘ll not get any response for that and see the console log for the invalid URL you ‘ll see the error.
When you run the project and access the URL you see the home component loading by default. it’s coming because in our Routes for route / we are rendering Home component. You can change it to any other component you ‘ll see the result accordingly.
Check all links and test the dedicated component is displaying or not.



You can see the response for each link. As we mentioned if someone try to access any invalid URL what ‘ll happen then. Let’s try that put any invalid URL in your browser and see response. You ‘ll get the blank response. See your browser console also you ‘ll see the error.
Let’s say i am putting a invalid URL like contact123. See what ‘ll happen.
A blank response ‘ll come.

And on your console you ‘ll see the error like below screenshot.

Handle Invalid URL in React Routing
We have seen that if we are putting any invalid URL our screen is showing blank. No response is there but this is a bad impression for customer. Say if someone put any invalid URL by mistake then our screen ‘ll come as blank.
The correct way to handle this scenario is to show some custom response like if someone try to access any invalid URL on our website we have to give him a response say 404 this page not found. We can customize this component and show whatever we want to display to our customer if they try to access any invalid URL.
This is very easy to implement. We just have to create a new react component for this error page and have to add the routing in our Routes section. Let’s see how to implement this.
Create a react component for 404 pages.

PageNotFound.js
function PageNotFound() {
return (
<div>
<h1>404 Page Not found. You are trying to access invalid URL</h1>
</div>
);
}
export default PageNotFound;
Code language: JavaScript (javascript)
Update your App.js Routes section. At the end we are creating a new Route with *. it means if any anyone try to access the invalid URL react scan all the routes and if do not found any match it ‘ll display the component that is mapped to *. Add below line in your Routes.
<Route path="*" element={<PageNotFound />} />
Code language: JavaScript (javascript)

Just do these two changes and see the output.

Tip: Let me share one tip at the end of this tutorial. You can also use <NavLink> tag inside the <Link>. They are almost same the only difference is <NavLink> tag add the .active class by default on the selected link. Where as while using <Link> we have to explicitly add the .active class for the links.
Hope you enjoy this blog. If you like the blog please share with others. Please share your feedback in comment section so we can improve and help you in your learning journey.
If you need blog on any specific topic. Please share the topic in comment section we ‘ll try our best to cover that topic in our upcoming blog.
Thanks
Other blogs you may like
React native setup. First step towards your mobile application learning