NPM React Router Dom
React Router DOM is a powerful routing library for React applications that enables navigation and URL routing. In this article, we’ll explore React Router DOM in-depth, covering its installation, basic usage, advanced features, and best practices.
What is React Router DOM?
React Router DOM is a collection of navigational components for React applications that allows developers to declaratively define the application’s UI based on the URL. It provides a way to synchronize the UI with the URL, enabling client-side routing in single-page applications (SPAs).
Steps to Implement React-router-dom
Step 1: Create a React application using the following command:
npx create-react-app myapp
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd myapp
Project Structure:
Step 3: Next, install react-router-dom using the following command
npm install react-router-dom
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
},
Basic Usage
React Router DOM provides several components for defining routes in your application:
- BrowserRouter: Wraps your application with a router component that listens to changes in the URL.
- Router: Alias for BrowserRouter. (This is used for renaming convenience, if desired.)
- Routes: Container for defining routes in your application.
- Route: Defines a route that renders a component based on the current URL path.
Example:
// App.js
import {
BrowserRouter as Router,
Routes, Route
} from 'react-router-dom';
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="/about" element={<About />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</Router>
);
}
export default App;
Output:
Conclusion
React Router DOM, available via npm, simplifies client-side routing in React applications. It provides essential components like BrowserRouter, Router, Routes, and Route, facilitating URL-based navigation and rendering components based on URL paths. With its intuitive API, React Router DOM enables seamless navigation and state management, enhancing the user experience in single-page applications.
Contact Us