In this project, you will learn how to create multiple pages and navigate between them using React Router. This is essential for building Single Page Applications (SPAs) that have multiple views without full page reloads. We will install React Router, define routes, and set up navigation between pages.
Skills Covered:
- Setting up React Router
- Defining routes
- Navigating between pages
- URL parameters
Steps:
Step 1: Install React Router
In your project directory, install React Router:
npm install react-router-dom
Step 2: Set up React Router in App.jsx
In the src folder, edit App.jsx to set up the main router configuration:
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
// Import your page components
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/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;
Explanation:
Router: Wraps the entire app to enable routing.Link: Replaces traditional anchor (<a>) tags for navigation. They don’t cause a full page reload, making the app feel more like a SPA.RoutesandRoute: Define the paths and map them to the respective components (Home,About,Contact).
Step 3: Create the Pages
Next, create the components for your pages inside a new folder named pages.
Home Component (src/pages/Home.jsx):
function Home() {
return (
<div>
<h1>Home Page</h1>
<p>Welcome to the home page!</p>
</div>
);
}
export default Home;
About Component (src/pages/About.jsx):
function About() {
return (
<div>
<h1>About Us</h1>
<p>This is the about page.</p>
</div>
);
}
export default About;
Contact Component (src/pages/Contact.jsx):
function Contact() {
return (
<div>
<h1>Contact Us</h1>
<p>If you have any questions, feel free to reach out!</p>
</div>
);
}
export default Contact;
Explanation:
- We created three simple pages (
Home,About,Contact) that will be rendered based on the route the user navigates to. - Each page returns a different message in a
div.
Step 4: Add Navigation and Links
We already added Link components in the navigation (<nav> element) of App.jsx. These Link components allow users to switch between pages without refreshing the page. When a user clicks on one of the links, the corresponding route’s component will be rendered.
Step 5: Handling 404 Pages (Not Found)
It’s common to handle undefined routes (404 pages). We can add a catch-all route that displays a “Page Not Found” message.
Modify the App.jsx to include this:
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/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 />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
function NotFound() {
return (
<div>
<h1>404 Page Not Found</h1>
<p>Sorry, the page you are looking for does not exist.</p>
</div>
);
}
export default App;
Explanation:
- The wildcard
path="*"is used to catch all undefined routes and display theNotFoundcomponent.
Step 6: URL Parameters (Optional)
Sometimes you need to capture dynamic values from the URL, such as displaying details for a specific user. Let’s create a simple example that accepts a username as a URL parameter.
Add a new route for the user profile in
App.jsx:
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Profile from './pages/Profile';
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 />} />
<Route path="/profile/:username" element={<Profile />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
export default App;
Create the Profile component in src/pages/Profile.jsx:
import { useParams } from 'react-router-dom';
function Profile() {
const { username } = useParams();
return (
<div>
<h1>Profile Page</h1>
<p>Welcome, {username}!</p>
</div>
);
}
export default Profile;
Explanation:
useParams: A hook provided by React Router to access the URL parameters (in this case,:username).- If you navigate to
/profile/johndoe, theProfilecomponent will render and display “Welcome, johndoe!”.
Step 7: Run the Project
Run the project by executing:
npm run dev
Visit the following routes in your browser:
http://localhost:3000/– Home pagehttp://localhost:3000/about– About pagehttp://localhost:3000/contact– Contact pagehttp://localhost:3000/profile/johndoe– Profile page for userjohndoehttp://localhost:3000/some-undefined-route– 404 page
