Lecture Notes Of Day 14: Introduction to React Router
Objective:
To learn how to navigate between pages in a React application using React Router.
Outcome:
By the end of the class, you will have set up React Router in your project and be able to create links between different components using BrowserRouter, Route, and Link.
Introduction to React Router
In single-page applications (SPA) built with React, navigating between different pages or views is a common requirement. React Router is the standard library used to implement navigation in React applications. It allows you to handle routing and navigation, enabling users to move between different views or components.
React Router provides different components such as BrowserRouter, Route, Link, and others to manage navigation. Today, we will explore how to set up routing in your React app and create links between pages.
Setting Up React Router
Step 1: Install React Router
To use React Router, we first need to install the react-router-dom package.
Open your terminal and run:
bash
Copy code
npm install react-router-dom
This will install the necessary libraries to manage routing in a React application.
Step 2: Import React Router Components
After installation, you can import the required components in your React files.
javascript
Copy code
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
- BrowserRouter (or Router) wraps the entire application to enable routing.
- Route is used to define individual routes.
- Link is used to navigate between different routes.
Step 3: Creating the App Layout
Let's start by creating a simple layout with two components and a navigation bar that links between them.
Create the Components:
1. Home.js:
javascript
Copy code
import React from 'react';
function Home() {
return <h2>Home Page</h2>;
}
export default Home;
2. About.js:
javascript
Copy code
import React from 'react';
function About() {
return <h2>About Page</h2>;
}
export default About;
Step 4: Setup Routing with BrowserRouter
Now, let's modify the main App.js file to set up routing.
javascript
Copy code
import React from 'react';
import { BrowserRouter as Router, 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>
{/* Define Routes */}
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
}
export default App;
Explanation of Key Components:
1. BrowserRouter (<Router>):
o The BrowserRouter component wraps the entire app and enables navigation. It uses the HTML5 history API to keep the UI in sync with the URL.
o Inside the <Router>, we define the links and routes for navigation.
2. Route:
o The Route component is used to define which component should be displayed for a specific path.
o The path prop specifies the URL pattern that will render the component.
o The exact keyword ensures that the route only matches when the exact path is matched. Without it, /about would also match /.
3. Link:
o The Link component is used to create links for navigation between pages.
o The to prop specifies the path to which the link should navigate.
Step 5: Testing the Application
Once you’ve set up the routes, you can now test the app. When you run the application:
bash
Copy code
npm start
- You should see a navigation menu with links to Home and About.
- When you click on Home, the Home Page component should be displayed.
- When you click on About, the About Page component should appear.
Step 6: Using Dynamic Routes
React Router allows you to handle dynamic routes, where parts of the URL can change. This is useful when you want to render different content based on the URL parameter.
Example: Dynamic Route for User Profiles
1. Create a Profile Component:
javascript
Copy code
import React from 'react';
function Profile({ match }) {
return <h2>Welcome to the profile of {match.params.username}</h2>;
}
export default Profile;
In the Profile component, match.params.username will dynamically get the value from the URL.
2. Add Dynamic Route to App.js:
javascript
Copy code
import Profile from './Profile';
<Route path="/profile/:username" component={Profile} />
- The :username part in the path is a dynamic parameter that will change based on the URL.
- For example, /profile/john will display Welcome to the profile of john.
Step 7: Nested Routes
React Router also supports nested routes, where one route is inside another.
Example of Nested Routes:
1. Create a Dashboard Component:
javascript
Copy code
import React from 'react';
import { Route, Link } from 'react-router-dom';
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
<nav>
<ul>
<li><Link to="/dashboard/overview">Overview</Link></li>
<li><Link to="/dashboard/settings">Settings</Link></li>
</ul>
</nav>
{/* Nested Routes */}
<Route path="/dashboard/overview" component={Overview} />
<Route path="/dashboard/settings" component={Settings} />
</div>
);
}
function Overview() {
return <h3>Overview Section</h3>;
}
function Settings() {
return <h3>Settings Section</h3>;
}
export default Dashboard;
2. Add Route to Main App:
javascript
Copy code
<Route path="/dashboard" component={Dashboard} />
When you navigate to /dashboard, it will display the Dashboard component, and inside it, you'll have links to Overview and Settings as nested routes.
Conclusion
In today's lesson, we learned how to:
1. Set up React Router in a React application.
2. Create routes using the Route component to display different pages.
3. Use Link to create navigation links between components.
4. Understand how to handle dynamic and nested routes.
By mastering React Router, you can build complex, multi-page applications with React that provide a smooth, dynamic user experience without page reloads.
Homework/Practice:
1. Create an additional page called Contact and add a link to it in the navigation.
2. Experiment with dynamic routes using parameters like user ID or product ID.
3. Explore Redirect and useHistory hooks to programmatically navigate between pages.