What is React Router?
React Router is like a traffic controller for your React application. Just like how a traffic controller directs vehicles on roads, React Router directs users to different parts of your app based on the URL they visit. So, when you click on a link or type a URL in your browser, React Router decides which part of your React app to show, making it easy to create seamless and interactive single-page applications.
Key Features of React Router:
- Declarative Routing: Set up navigation using a declarative syntax, making it easy to define routes clearly and intuitively.
- Component-Based: Routes are associated with React components, allowing each route to render a specific component when navigated.
- Nested Routing: Supports nested routes, enabling the creation of complex page structures with subcomponents and layouts.
- Dynamic Routing: Allows for dynamic route parameters, enabling the creation of flexible and parameterized routes.
- Programmatic Navigation: Enables navigation via JavaScript code, facilitating redirections and transitions based on user interactions or application logic.
Steps to Create React App and Installing React Router:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Step 3: Install React Router package.
npm install react-router-dom
Project Structure:
Example Code: Write the following code in the respective files.
- App.js: This file implements Routing
- Home.js: This file contains the Home Component used in Routing
- About.js: This file contains the About Component used in Routing
Javascript
// App.js import React from 'react' ; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom' ; import Home from './Home' ; import About from './About' ; function App() { return ( <Router> <div> <nav> <ul> <li> <Link to= "/" >Home</Link> </li> <li> <Link to= "/about" >About</Link> </li> </ul> </nav> <Routes> <Route path= "/" element={<Home />} /> <Route path= "/about" element={<About />} /> </Routes> </div> </Router> ); } export default App; |
Javascript
// Home.js import React from 'react' const Home = () => { return ( <div>Home</div> ) } export default Home |
Javascript
// About.js import React from 'react' const About = () => { return ( <div>About</div> ) } export default About |
Start your application using the following command.
npm start
Output:
Contact Us