Setting Up React Router

Setting up React Router in a React application allows you to manage the navigation and routing of your app efficiently. React Router enables you to define different routes, link them to specific components, and create a seamless navigation experience without the need for full-page reloads.

1. Installing React Router

To begin using React Router in your React app, you’ll need to install the react-router-dom package. This can be done using npm or yarn.

npm install react-router-dom

or

yarn add react-router-dom

Once installed, you can start using React Router in your application.

2. Basic Setup of React Router

After installing react-router-dom, you need to configure the routing in your application. The essential components of React Router are BrowserRouter, Route, and Link.

Example: Basic Routing Setup

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

// Components for different pages
function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        {/* Navigation links */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

export default App;

3. Explanation of Key Components

• <BrowserRouter> (or <Router>): This component uses the HTML5 history API to keep your UI in sync with the URL. You need to wrap your entire application with this component.
• <Route>: The <Route> component is used to define a mapping between a URL path and a React component. It renders the component when the path in the URL matches.
• <Link>: The <Link> component is used to create navigable links within your app. It’s an alternative to the traditional anchor (<a>) tag but without causing a page reload.
• <Switch>: The <Switch> component ensures that only the first matching route is rendered. This is useful when you have multiple routes and want to display only one route at a time.

4. Handling Exact Routes

The exact prop on the <Route> component ensures that the route matches the path exactly. Without it, React Router will render the first <Route> that partially matches the path.

Example with exact Prop:

<Route path="/" exact component={Home} />  {/* Only matches '/' exactly */}
<Route path="/about" component={About} />

5. Dynamic Routes with Parameters

React Router supports dynamic routes, which allow you to pass parameters in the URL. These parameters can be accessed inside your component using match.params.

Example: Route with a Parameter

function UserProfile({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={UserProfile} />
      </Switch>
    </Router>
  );
}

In this example:

• :id is a dynamic parameter.
• You can access the value of the parameter via match.params.id.

6. Programmatic Navigation

React Router also allows for programmatic navigation. You can use the history object to navigate to different routes programmatically, without relying on the <Link> component.

Example: Programmatic Navigation

import React from 'react';
import { useHistory } from 'react-router-dom';

function RedirectButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/about');  // Navigates to the About page
  };

  return <button onClick={handleClick}>Go to About Page</button>;
}

function App() {
  return (
    <Router>
      <RedirectButton />
    </Router>
  );
}

In this example:

• useHistory() is a hook that provides access to the history object, allowing you to programmatically navigate between routes.

7. Nested Routes

React Router supports nested routes, which allow you to have routes within other routes. This is useful when you want to render different components or sections inside a main component.

Example: Nested Routes

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Route path="/dashboard/overview" component={Overview} />
      <Route path="/dashboard/stats" component={Stats} />
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

In this example, Overview and Stats are nested routes inside the Dashboard route.