.png){kind=logo}
Hello All,
In this article we will learn how to add routing to our react application.
First article we have learnt how to create the application and folder structure React JS 1: First React Application
Lets start working on react router:
What is Routing?
Routing is the process of redirecting to page when user clicks on link. But in React JS we are not loading any pages instead we load the components in particular place.
Step 1:
1. Create react application using command prompt
npx create-react-app application-with-router
2. Redirect to created project
cd application-with-router
3. Open the project in Visual Studio Code, run the below command in command prompt else open the project directly in VSCode
code .
4. Here is the source code
3. Remove unwanted file from the project, shown below
4. Clean up the index.html page, add below code to index.html page
<!DOCTYPE html> <html lang="en"> <head> <title>React Router Example</title> </head> <body> <div id="root"></div> </body> </html>
5. Clean up the App.js file, add below code to App.js page
function App () {
return (
<div>
<h1>React Router Application</h1>
</div>
)
}
export default App
6. Clean up the index.js file add below code to index.js page.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
7. Lets run the application, open new terminal in VSCode and run the below command
npm start
Step 2:
1. Lets create the components called Home, AboutUs, ContactUs
--> Inside source folder create the folder called components
--> Create 3 JavaScript files Home.js, AboutUs.js, ContactUs.js
Home.js:
Add below code to Home.js file
export default Home = () => {
return <h1>I am your home page</h1>
}
AboutUs.js
Add below code to AboutUs.js
export default AboutUs = () => {
return <h1>I am your about us page</h1>
}
ContactUs.js:
Add below code to ContactUs.js file
export default ContactUs = () => {
return <h1>I am your contact us page</h1>
}
2. Lets add dependency related to react router
npm install react-router-dom
3. Go to App.js, add the components reference
import Home from './components/Home' import AboutUs from './components/AboutUs' import ContactUs from './components/ContactUs' function App () { return ( <div> <h1>React Router Application</h1> </div> ) } export default App
4. Import the namespace related to React Router
BrowserRouter : BrowserRouter is used in React Router. All the router logic to be added in it. Basically BrowserRouter is a router implementation that uses the HTML5 history API(pushState, replaceState and the popstate event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components.
Link : Link is used to load the page which is associated with that path
Routes : acts as a container/parent for all the individual routes that will be created in our app.
Route: is used to create a single route. It takes in two attributes
path: which specifies the URL path of the desired component. You can call this pathname whatever you want. Above, you'll notice that the first pathname is a backslash (/). Any component whose pathname is a backslash will get rendered first whenever the app loads for the first time. This implies that the Home component will be the first component to get rendered.
element: which specifies the component the route should render.
Here is the complete code of App.js file
import { BrowserRouter as Router,Link, Route, Routes } from 'react-router-dom'
import Home from './components/Home'
import AboutUs from './components/AboutUs'
import ContactUs from './components/ContactUs'
function App () {
return <Router>
<h1>Welcome to React Router Example</h1>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About US</Link></li>
<li><Link to="/contact">Contact US</Link></li>
</ul>
<Routes>
<Route exact path='/' element={<Home/>}></Route>
<Route exact path='/about' element={<AboutUs/>}></Route>
<Route exact path='/contact' element={<ContactUs/>}></Route>
</Routes>
</Router>
}
export default App
We have done with routing, Lets run the application
Here is the output:
When the app is started, we will see three clickable links that can be used to change the route.
Thats it for this article, i hope you enjoyed this.
Download Complete Source Code Here
Let us know in case any concerns through comments section.
See you in next article, until then take care have great day.
