When building a web application, it is essential to have proper navigation and the ability to display different pages. In React, we can achieve this by implementing routing.
Routing is the process of determining the response to a given request URL, and mapping it to the appropriate component to render. It allows us to navigate between different parts of the application without the need for a full page reload.
In a payment app, we can have different pages such as Home, About, and Contact. Each page will have its own URL and content. Let's take a look at how we can implement routing in a React application.
- Install the required dependencies: The most popular package for routing in React is
react-router-dom. We can install it using npm by running the following command:
JAVASCRIPT
1npm install react-router-dom- Import the required components: We need to import the required components from
react-router-domto implement routing. In our case, we need theBrowserRoutercomponent to wrap our app, and theRoutecomponent to define the routes. `jsx(import { BrowserRouter, Route } from 'react-router-dom';)` - Define the routes: We can define the routes in the
Appcomponent using theRoutecomponent. Each route will have a path and a component to render. For example, we can define the route for the Home page as follows:
SNIPPET
1(<Route path="/" exact component={HomePage} />)`
24. Wrap the app with BrowserRouter: Finally, we need to wrap our app with the `BrowserRouter` component to enable routing in our application.
3```jsx
4(<BrowserRouter>
5 <App />
6</BrowserRouter>)`
7
8With these steps, we have implemented routing in our React application. Now, when the user navigates to different URLs, the corresponding components will be rendered.
9
10Here's an example of a simple React app with routing:
11```jsx
12// Example component
13function HomePage() {
14 return <h1>Home Page</h1>;
15}
16
17function AboutPage() {
18 return <h1>About Page</h1>;
19}
20
21function ContactPage() {
22 return <h1>Contact Page</h1>;
23}
24
25function App() {
26 return (
27 <BrowserRouter>
28 <nav>
29 <ul>
30 <li><a href="/">Home</a></li>
31 <li><a href="/about">About</a></li>
32 <li><a href="/contact">Contact</a></li>
33 </ul>
34 </nav>
35
36 <Route path="/" exact component={HomePage} />
37 <Route path="/about" component={AboutPage} />
38 <Route path="/contact" component={ContactPage} />
39 </BrowserRouter>
40 );
41}
42
43ReactDOM.render(
44 <React.StrictMode>
45 <App />
46 </React.StrictMode>,
47 document.getElementById('root')
48);xxxxxxxxxx18
const express = require('express');const app = express();app.get('/', (req, res) => { res.send('Home Page');});app.get('/about', (req, res) => { res.send('About Page');});app.get('/contact', (req, res) => { res.send('Contact Page');});app.listen(3000, () => { console.log('Server is running on port 3000');});OUTPUT
:001 > Cmd/Ctrl-Enter to run, Cmd/Ctrl-/ to comment
