404 and React Routing

React Router is a library that provides routing capabilities to React applications. It enables you to define a set of routes in your application, each with a corresponding component that will be rendered when the route is active. This allows you to build single-page applications (SPAs) with multiple views and maintain the application state in the URL.

To use React Router in your application, you will need to install it as a dependency:

npm install react-router-dom

Then, you can use the BrowserRouter component to wrap your root component and define your routes using the Route component. For example:

import { BrowserRouter, Route } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  </BrowserRouter>
);

This will render the Home component when the root path is active, the About component when the /about path is active, and the Contact component when the /contact path is active.

Get The Confessional’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

You can also use the Link component to navigate between routes in your application. For example:

import { Link } from 'react-router-dom';

const Navigation = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/contact">Contact</Link>
      </li>
    </ul>
  </nav>
);

This will render a navigation bar with links to the different routes in your application.