A Beginner's Guide to React Router
Introduction React Router is a powerful library for routing in React applications. It allows you to create dynamic, single-page applications that can handle multiple routes and pages without requiring a full page refresh. In this blog post, we will explore how React Router can be used in a real world example of a multi-page application.
Example
Let's consider a simple e-commerce website that has three pages: a home page, a product list page, and a product details page. We will use React Router to manage the routing between these pages.
First, let's install React Router using npm: > npm install react-router-dom
Here is an example code snippet that demonstrates how to use React Router to manage routing between three pages - home page, product list page, and product details page. We'll write each component separately and then import them into the App component.
// Home component
import React from 'react';
const Home = () => {
return (
<div>
<h1>Welcome to our e-commerce website</h1>
<p>Here you can find the best deals on all your favorite products.</p>
</div>
);
};
export default Home;
// ProductList component
import React from 'react';
import { Link } from 'react-router-dom';
const ProductList = () => {
return (
<div>
<h2>Product List</h2>
<ul>
<li><Link to="/product/1">Product 1</Link></li>
<li><Link to="/product/2">Product 2</Link></li>
<li><Link to="/product/3">Product 3</Link></li>
</ul>
</div>
);
};
export default ProductList;
// ProductDetails component
import React from 'react';
const ProductDetails = ({ match }) => {
const productId = match.params.id;
return (
<div>
<h2>Product Details</h2>
<p>You are viewing details for product {productId}.</p>
</div>
);
};
export default ProductDetails;
// App component
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import ProductList from './ProductList';
import ProductDetails from './ProductDetails';
const App = () => {
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/products">Products</Link></li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/products" component={ProductList} />
<Route exact path="/product/:id" component={ProductDetails} />
</Switch>
</div>
</Router>
);
};
export default App;
In this example, we've defined the Home, ProductList, and ProductDetails components separately. We then imported these components into the App component and used React Router to manage the routing between these components. The BrowserRouter component is used to wrap the entire application, and the Switch component is used to render only one route at a time. The Route component is used to define each route and its associated component, and the Link component is used to create links between different pages.
Kommentare