Previous

React Router

  • React Router is a standard library for navigation in React applications.
  • It enables the navigation between different components while keeping the UI in sync with the URL.

Installation

Install React Router using npm or yarn.

npm install react-router-dom

or

yarn add react-router-dom

Basic Example

Setting up basic routing with BrowserRouter, Route, and Link.

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

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

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

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

export default App;

Route Parameters

Using route parameters to make routes dynamic.

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

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

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/user/123">User 123</Link>
            </li>
            <li>
              <Link to="/user/456">User 456</Link>
            </li>
          </ul>
        </nav>

        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
};

export default App;

Nested Routes

Implementing nested routes for more complex navigation.

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

const Dashboard = () => <h2>Dashboard</h2>;
const UserProfile = () => <h3>User Profile</h3>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
            <li>
              <Link to="/profile">Profile</Link>
            </li>
          </ul>
        </nav>

        <Route path="/dashboard" component={Dashboard} />
        <Route path="/profile" component={UserProfile} />
      </div>
    </Router>
  );
};

export default App;

Redirects

Using Redirect to navigate based on certain conditions.

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

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = /* Check authentication status */ false;

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

const Dashboard = () => <h2>Dashboard</h2>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <PrivateRoute path="/dashboard" component={Dashboard} />
      </div>
    </Router>
  );
};

export default App;

 

Summary

React Router provides a powerful and flexible way to handle navigation and routing in React applications. Whether it's basic navigation, dynamic routes, nested routes, or handling redirects, React Router simplifies the process of building navigational elements within your app.

Previous