Creating a multi-page application in React is straightforward with the help of React Router. React Router is a powerful library that allows you to implement routing in your React apps. In this article, we'll walk through the steps to set up a multi-page application using React Router, covering the basic concepts and code examples to get you started.
What is React Router?
React Router is a library that enables dynamic routing in your React applications. It helps you manage navigation and render different components based on the URL path. With React Router, you can create a seamless multi-page experience within a single-page application.
Getting Started
1. Install React Router
First, you need to install React Router. Open your terminal and run the following command:
npm install react-router-dom
2. Set Up Your Project Structure
Create a basic React project if you haven't already. Your project folder might look something like this:
my-app/
├── public/
├── src/
│ ├── components/
│ │ ├── Home.js
│ │ ├── About.js
│ │ └── Contact.js
│ ├── App.js
│ ├── index.js
│ └── App.css
└── package.json
3. Create Components for Each Page
Create the components for each page of your application. For this example, we'll create Home.js
, About.js
, and Contact.js
in the components
folder.
Home.js
import React from 'react';
function Home() {
return <h1>Home Page</h1>;
}
export default Home;
About.js
import React from 'react';
function About() {
return <h1>About Page</h1>;
}
export default About;
Contact.js
import React from 'react';
function Contact() {
return <h1>Contact Page</h1>;
}
export default Contact;
4. Set Up Routing in App.js
Now, configure routing in your App.js
file. Import the necessary components from react-router-dom
and set up your routes.
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
function App() {
return (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}
export default App;
In this code:
-
BrowserRouter
(aliased asRouter
) is used to handle the routing. -
Route
defines the path and component to render. -
Routes
wraps multipleRoute
components. -
Link
is used to create navigation links.
5. Add Some Basic Styling
You can add some basic styles to your App.css
to make the navigation look better.
App.css
nav {
background-color: #333;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
6. Run Your App
Finally, run your React app with the following command:
npm start
Open your browser and navigate to http://localhost:3000
. You should see your multi-page application with working navigation links.
Conclusion
With React Router, building a multi-page app becomes a breeze. You’ve learned how to set up basic routing, create page components, and manage navigation. React Router’s flexibility and ease of use make it an essential tool for React developers, enabling you to build dynamic and user-friendly web applications.
Top comments (0)