Intern level: Routing with React Router

Routing is a critical aspect of building modern web applications. React Router is a powerful library that allows you to handle routing in a React application. This guide will introduce you to React Router, covering basic setup and usage, as well as advanced routing techniques 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 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 will be rendered when the path is /, and the About component will be 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 will be rendered.

Link Component

The Link component is used to create navigational links in your application. It works similarly to an anchor (<a>) tag but avoids full 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 will navigate 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 is used to apply 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. This is 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. As you continue to develop your skills, these concepts will form the foundation of your ability to build sophisticated single-page applications with React.