This content originally appeared on DEV Community and was authored by Kauna Hassan
React is a well-known JavaScript library used to create dynamic and interactive user interfaces. React-Router is a library used in React applications to handle client-side routing. We will learn how to use React-Router to create dynamic user interfaces, including handling nested routes, authentication, and page transitions, in this article.
Prerequisites
Before delving into the details of React-Router, it's important to first understand React and JavaScript. If you're new to React, read the official React documentation or enroll in a React course. Knowledge of HTML and CSS is also advantageous.
Setting up React-Router
To begin using React-Router, we must first install it. You can install it with npm, the Node.js package manager.
npm install react-router-dom
Once installed, we can use the following line to import React-Router into our code:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
Creating Routes
Routes are the foundation of React-Router. They are in charge of mapping URLs to components. React-Router includes a number of route-creation components. Route
, Switch
, and Link
are the most commonly used.
A route component is used to specify a path
. It requires two parameters: path
and component
. path
is the URL that should be matched by the route. When the URL matches the path
, component
is the React component that should be rendered.
<Route path="/about" component={About} />
A Switch
component wraps multiple Route
components. Only the first Route
that matches the current URL is rendered. This prevents more than one component from being rendered at the same time.
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
The link
component is used to create links to various routes. It requires only one parameter: to
, which is the URL to
which the link should point.
<Link to="/about">About</Link>
Handling Nested Routes
Routes that are rendered within another route are referred to as nested routes. They come in handy when creating complex user interfaces. React-Router makes handling nested routes simple and intuitive.
To create nested routes, we must first define the parent and child routes. Within the parent route, the child routes should be defined. To render the child routes, we can use the render
prop.
<Route path="/products" render={() => (
<div>
<h1>Products</h1>
<Route path="/products/:id" component={Product} />
</div>
)} />
We defined a parent route /products
and a child route /products/:id
in the preceding example. The :id
parameter stands in for the product ID. When a user navigates to /products/123
, the Product component with the ID 123
is rendered.
Authentication Management
Web applications frequently include authentication. Using the Redirect
component, React-Router handles authentication. The Redirect
component is used to redirect users to another page based on specific conditions.
import { Redirect } from 'react-router-dom';
function PrivateRoute({ component: Component, authenticated, ...rest }) {
return (
<Route {...rest} render={(props) => (
authenticated === true
? <Component {...props} />
: <Redirect to='/login' />
)} />
)
}
In the preceding example, we defined a PrivateRoute
component with three props: component
, authenticated
, and rest
. component
denotes the React component to be rendered. authenticated is a boolean value indicating whether or not the user has been authenticated. rest
is a container for any additional props.
The Route render
prop is used to render the component
depending on the authentication status. The Component
is rendered if the user is authenticated. If the user is not authenticated, the Redirect
component redirects the user to the login page.
Page Transitions
Page transitions are animations that happen when a user switches between pages. The react-transition-group library is used by React-Router to handle page transitions.
npm install react-transition-group
After installing the react-transition-group
library, we can import the TransitionGroup
and CSSTransition
components.
import { TransitionGroup, CSSTransition } from 'react-transition-group';
To enable page transitions, we can wrap our Switch component in the TransitionGroup component. The CSSTransition component is used to define the animation.
<TransitionGroup>
<CSSTransition key={location.key} classNames="fade" timeout={300}>
<Switch location={location}>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</CSSTransition>
</TransitionGroup>
In the preceding example, we wrapped our Switch
component in a TransitionGroup
component. CSSTransition's key
prop is set to location.key
to ensure that the animation is triggered when the location changes. To define the animation, the classNames
prop is set to fade
. The timeout
prop is set to 300 milliseconds
to specify the duration of the animation.
Conclusion
React-Router is a robust library that handles client-side routing in React applications. In this article, we have learned how to use React-Router to create dynamic user interfaces, including handling nested routes, authentication, and page transitions. We also used cutting-edge technology and examples to demonstrate the concepts. You can use React-Router to create a unified user experience and improve the overall usability of your application.
This content originally appeared on DEV Community and was authored by Kauna Hassan

Kauna Hassan | Sciencx (2023-02-25T16:04:15+00:00) Building Dynamic User Interfaces with React and React-Router. Retrieved from https://www.scien.cx/2023/02/25/building-dynamic-user-interfaces-with-react-and-react-router/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.