Junior level: Routing with React Router

Routing is a critical part of building modern web applications. React Router is a powerful library that allows you to handle routing in a React application effectively. This guide will help you understand the basics of React Router, including setting it up, 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 enables navigation between different components in a React application, allowing you to create a single-page application (SPA) with multiple views.

Setting Up React Router

To get started with React Router, you need to install it in your project. You can do this 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 components to define routes and handle navigation.

Route Component

The Route component is used to define a route in your application. It specifies the path and the component that should be rendered when the path is matched.

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 one route is rendered at a time. It renders the first Route that matches the current URL.

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 an anchor (<a>) tag but without reloading the page.

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, useful for creating layouts with sub-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.