Skip to main content

Routing

Routing in React is the process of setting up the application to handle different URLs and render specific components based on those URLs. This enables navigation between different parts of an application without requiring a full page reload. The most commonly used library for routing in React is React Router.

Router​

The Router component is the foundational component that keeps the UI in sync with the URL. It wraps the entire application or a part of it where routing is needed.

Route​

The Route component is used to define a mapping between a URL path and a React component. When the URL matches the path specified in a Route, the corresponding component is rendered.

The Link component is used to navigate between routes. It renders an anchor tag but prevents the default full-page reload behavior, updating the URL and rendering the new route efficiently.

First, you'll need to install React Router:

npm install react-router-dom

Here's a simple example to demonstrate basic routing:

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

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;
const Contact = () => <div>Contact Page</div>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

export default App;

Advanced Features​

Nested Routing​

You can define routes within routes to create more complex layouts like tabbed interfaces.

Dynamic Routing​

React Router supports dynamic routes, allowing you to capture values from the URL into route parameters, which can be used to dynamically fetch data or render components.

Redirects​

You can programmatically navigate users to different routes using the Redirect component or the useHistory hook.

Route Guards​

You can protect routes from unauthorized access using route guards, which are essentially functions that return a boolean indicating whether or not the route should be accessible.

Lazy Loading​

React Router allows you to lazily load components, which can significantly improve performance for larger applications.

Understanding routing in React is crucial for building single-page applications (SPAs) that offer a smooth user experience. React Router is a powerful tool that provides a wide range of features to implement complex routing logic.