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:
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.