Mid level: Routing with React Router

Routing is a crucial aspect of building modern web applications. React Router is a powerful library that enables developers to handle client-side routing in a React application efficiently. This guide will delve into the basics of setting up React Router, using essential components, and exploring advanced routing techniques such as nested routes, dynamic routing, route parameters, and route guards.

Introduction to React Router

React Router allows you to manage navigation and rendering of different components based on the URL. It helps in building single-page applications (SPAs) with a seamless navigation experience.

Setting Up React Router

To start using React Router, install it using npm or yarn.

npm install react-router-dom

or

yarn add react-router-dom

Route, Switch, Link, and NavLink Components

React Router provides several core components for defining routes and handling navigation.

Route Component

The Route component is used to define a path and associate it with a component.

Example:

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

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

export default App;

In this example, the Home component is rendered when the path is /, and the About component is rendered when the path is /about.

Switch Component

The Switch component ensures that only the first matching route is rendered.

Example:

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

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

export default App;

In this example, if no routes match, the NotFound component is rendered.

Link Component

The Link component creates navigational links in your application, similar to anchor (<a>) tags but without page reloads.

Example:

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

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

export default App;

In this example, clicking on the links navigates to the respective routes without reloading the page.

NavLink Component

The NavLink component is similar to the Link component but provides additional styling capabilities based on the active route.

Example:

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

const App = () => {
  return (
    <Router>
      <nav>
        <NavLink exact to="/" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

In this example, the activeClassName prop applies the active class to the link that matches the current route.

Advanced Routing Techniques

Nested Routes

Nested routes allow you to create routes within other routes, enabling a hierarchical structure of navigation.

Example:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch } from 'react-router-dom';

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = () => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <h2>Home</h2>
        </Route>
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  </Router>
);

export default App;

In this example, the Topics component contains nested routes, allowing for a sub-navigation system within the Topics section.

Dynamic Routing

Dynamic routing allows you to create routes based on dynamic parameters, such as user IDs or product IDs.

Example:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/user/:userId" component={User} />
      </Switch>
    </div>
  </Router>
);

export default App;

In this example, the User component is rendered with the user ID passed as a route parameter.

Route Parameters

Route parameters allow you to capture values from the URL and use them in your components.

Example:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/product/101">Product 101</Link>
        </li>
        <li>
          <Link to="/product/202">Product 202</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/product/:productId" component={Product} />
      </Switch>
    </div>
  </Router>
);

export default App;

In this example, the Product component uses the productId route parameter to display the product ID.

Route Guards and Redirects

Route guards and redirects help you control access to certain routes based on conditions, such as user authentication.

Protecting Routes

To protect routes, you can create a higher-order component (HOC) that checks for a condition (e.g., user authentication) before rendering the component.

Example:

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

const isAuthenticated = false;

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

const Dashboard = () => <h3>Dashboard</h3>;
const Login = () => <h3>Login</h3>;

const App = () => (
  <Router>
    <div>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

export default App;

In this example, the PrivateRoute component checks if the user is authenticated before rendering the Dashboard component. If the user is not authenticated, they are redirected to the Login component.

Implementing Redirects in React Router

Redirects can be implemented using the Redirect component to navigate users to a different route programmatically.

Example:

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/old-page">
        <Redirect to="/new-page" />
      </Route>
      <Route path="/new-page" component={NewPage} />
    </Switch>
  </Router>
);



export default App;

In this example, visiting /old-page will automatically redirect the user to /new-page.

Conclusion

Understanding and implementing routing with React Router is essential for building robust React applications. By mastering the basics of setting up routes, handling navigation with Link and NavLink, and implementing advanced techniques such as nested routes, dynamic routing, route parameters, and route guards, you can create seamless and secure navigation experiences in your applications. These concepts will form the foundation of your ability to build sophisticated single-page applications with React as you continue to develop your skills.