React Router : Implementing Client-Side Routing in React.js with React Router

Routing is an essential aspect of building single-page applications (SPAs) in React.js, allowing us to navigate between different views without a page refresh. React Router is a popular library that provides a declarative way to handle client-side routing in React. In this article, we will explore how to implement client-side routing using React Router, covering routing configuration, nested routes, and route guarding.

Getting Started with React Router

First, let’s install React Router using npm:

npm install react-router-dom

Once installed, we can start implementing routing in our React application.

Configuring Routes

To configure routes, we need to create a router component that wraps our application and define different routes using the <Route> component provided by React Router.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

In the example above, we define three routes: the home route (/), the about route (/about), and a catch-all route for any other undefined routes. The exact attribute ensures that the home route is matched only when the URL exactly matches the defined path.

Navigating between Routes

React Router provides a set of components to navigate between routes, such as <Link> and <NavLink>. Let’s see an example of how to use <Link> to create navigation links:

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

By using <Link>, we can navigate to different routes without a full page reload, providing a seamless user experience.

Nested Routes

React Router also supports nested routes, allowing us to define child routes within parent routes. Let’s see an example of how to define nested routes:

import React from 'react';
import { Route, Switch, Link, useRouteMatch } from 'react-router-dom';
import SubPageOne from './SubPageOne';
import SubPageTwo from './SubPageTwo';

const ParentPage = () => {
  const { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Parent Page</h2>
      <nav>
        <ul>
          <li>
            <Link to={`${url}/subpageone`}>Subpage One</Link>
          </li>
          <li>
            <Link to={`${url}/subpagetwo`}>Subpage Two</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path={path} render={() => <h3>Please select a subpage.</h3>} />
        <Route path={`${path}/subpageone`} component={SubPageOne} />
        <Route path={`${path}/subpagetwo`} component={SubPageTwo} />
      </Switch>
    </div>
  );
};

export default ParentPage;

In this example, we define a parent page component with two nested routes: SubPageOne and SubPageTwo. By using useRouteMatch, we can dynamically generate the URLs for the nested routes.

Route Guarding

Route guarding allows us to control access to certain routes based on specific conditions. React Router provides a <Route> component prop called render that allows us to conditionally render a component based on a guard function. Let’s see an example:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, isLoggedIn, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        if (isLoggedIn) {
          return <Component {...props} />;
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

export default ProtectedRoute;

In this example, we create a ProtectedRoute component that checks if the user is logged in. If the user is logged in, the component is rendered, otherwise, the user is redirected to the login page using <Redirect>.

Conclusion

React Router is a powerful library that simplifies client-side routing in React applications. By following the examples and concepts discussed in this article, you can implement routing, handle nested routes, and add route guarding to your React projects.

Remember to refer to the React Router documentation for more details and explore additional features such as route parameters, query parameters, and route transitions. Happy routing!