React Router is a popular library for managing routes in a React application. It allows you to define different routes for different pages in your application, and it provides a simple way to navigate between those pages. In this article, we will cover the basics of setting up React Router in a new React application.
Installing React Router
To install React Router, open a terminal and run the following command:
npm install react-router-dom
This will install the latest version of React Router and add it to your project’s dependencies.
Creating a Router
Once React Router is installed, you can start using it in your application. The first step is to create a router that will hold your routes. To do this, import the BrowserRouter
component from react-router-dom
and wrap your root component with it:
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
{/* Your routes go here */}
</div>
</BrowserRouter>
);
}
Defining Routes
With the router set up, you can start defining your routes. To define a route, import the Route
component from react-router-dom
and specify the path and component to render for that route:
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
In this example, we have defined two routes: /home
and /about
. When the user navigates to one of these routes, the corresponding component will be rendered.
Navigating Between Routes
To navigate between routes, you can use the Link
component from react-router-dom
. This component works like an anchor tag and allows you to navigate to a different route by clicking a link:
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
In this example, we have added two links to the home and about routes. When the user clicks on one of these links, the router will navigate to the corresponding route and render the corresponding component.
Dynamic Routing
React Router also allows you to define dynamic routes, which are routes that include a placeholder for a variable. For example, consider the following route:
<Route path="/users/:id" component={UserProfile} />
This route defines a placeholder called id
, which can be any string. When the user navigates to a route like /users/123
, the id
placeholder will be set to "123"
.
To access the value of the placeholder, you can use the useParams
hook from react-router-dom
:
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <h1>User {id}</h1>;
}
In this example, the id
variable will be set to the value of the id
placeholder in the route.
Nested Routing
You can also nest routes to create a hierarchy of routes within your application. For example, consider the following routes:
<Route path="/users/:id" component={User} />
<Route path="/users/:id/posts" component={UserPosts} />
In this case, the User
component will be rendered when the user navigates to a route like /users/123
, and the UserPosts
component will be rendered when the user navigates to a route like /users/123/posts
.
To nest these routes, you can use the Switch
component from react-router-dom
. This component will render the first matching route that it finds:
import { Switch } from 'react-router-dom';
function User() {
return (
<Switch>
<Route path="/users/:id" component={UserProfile} />
<Route path="/users/:id/posts" component={UserPosts} />
</Switch>
);
}
In this example, the Switch
component will render the UserProfile
component for a route like /users/123
, and it will render the UserPosts
component for a route like /users/123/posts
.
Conclusion
React Router is a powerful tool for managing routes in a React application. It allows you to define different routes for different pages, and it provides a simple way to navigate between those pages. In this article, we covered the basics of setting up React Router in a new React application. You can find more information on React Router and its features in the documentation.
Exercises
To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.
Create a new React application and install React Router.
npx create-react-app my-app
cd my-app
npm install react-router-dom
Create a router and define two routes: /home
and /about
. The Home
route should render a Home
component, and the About
route should render an About
component.
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
Add two links to the home and about routes using the Link
component.
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
Define a dynamic route /users/:id
that renders a User
component. The User
component should use the useParams
hook to access the id
parameter.
import React from 'react';
import { BrowserRouter, Route, Link, useParams } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
<Link to="/users/123">User 123</Link>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/users/:id" component={User} />
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
function User() {
const { id } = useParams();
return <h1>User {id}</h1>;
}
Nest the routes /users/:id
and /users/:id/posts
inside a Switch
component. The User
component should render the UserProfile
component for the /users/:id
route, and it should render the UserPosts
component for the /users/:id/posts
route.
import React from 'react';
import { BrowserRouter, Route, Link, Switch, useParams } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
<Link to="/users/123">User 123</Link>
<Link to="/users/123/posts">User 123 Posts</Link>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/users/:id" component={User} />
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
function User() {
return (
<Switch>
<Route path="/users/:id" component={UserProfile} />
<Route path="/users/:id/posts" component={UserPosts} />
</Switch>
);
}
function UserProfile() {
const { id } = useParams();
return <h1>User {id} Profile</h1>;
}
function UserPosts() {
const { id } = useParams();
return <h1>User {id} Posts</h1>;
}