Routing allows users to move between different parts of the application by changing the URL without reloading the whole page. To create dynamic routing in a React application, you can use the react-router-dom library (React Router), which provides components and utilities for implementing client-side routing.

Getting started with client-side routing

Install React router

First, you need to install the react-router-dom package. Open the terminal and run the following command.

npm install react-router-dom

Set up Routes

Once the React Router is installed, you can begin setting up routes in your application. Define routes to your components.

<BrowserRouter>
  <Routes>
	<Route path="/" element={<App />}>
	  <Route path="/page-1" element={<Page1 />} />
	  <Route path="/page-2" element={<Page2 />} />
	</Route>
  </Routes>
</BrowserRouter>

<Routes> component is used to define the routes of the application. It acts as a container for all the route configurations. The path attribute specifies the URL path that the route should match. The element specifies the component that should be rendered when the route matches. <Route path="/" element={<App />}> serves as the parent route for the nested routes defined inside it. <Route path="/page-1" element={<Page1 />} /> sets up a nested route for the URL “/page-1” within the parent route (“/”). <Route path="/page-2" element={<Page2 />} />: sets up a nested route for the URL “/page-2” within the parent route (“/”).

<Routes> must be wrapped in the <BrowserRouter> component to enable routing functionality.

Link to Routes

Use the Link component provided by React Router to create navigation links. Links allow users to navigate between different routes in the application.

<Link to={"/page-1"}>Page 1</Link>
<Link to={"/page-2"}>Page 2</Link>

Create <Outlet />

<Outlet> component serves as a placeholder where the child routes will be rendered.

<BrowserRouter>
  <Link to={"/page-1"}>Page 1</Link> | <Link to={"/page-2"}>Page 2</Link>
  <Routes>
	<Route path="/" element={<Outlet />}>
	  <Route path="/page-1" element={<Page1 />} />
	  <Route path="/page-2" element={<Page2 />} />
	</Route>
  </Routes>
</BrowserRouter>

<Route path="/" element={<Outlet />}> sets up a route for the root URL (“/”) of the application. When the root URL (http://localhost:3000/) is accessed, the <Outlet /> will be rendered. The <Outlet /> component inside the root route serves as a placeholder and specifies where the child routes will be rendered.

Full example

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./App";
import Page1 from "./components/Page-1";
import Page2 from "./components/Page-2";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="/page-1" element={<Page1 />} />
          <Route path="/page-2" element={<Page2 />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

App.tsx

import "./App.css";
import { Link, Outlet } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <br />
      Menu: <Link to={"/page-1"}>Page 1</Link> |{" "}
      <Link to={"/page-2"}>Page 2</Link>
      <h1>React Router demo</h1>
      <hr />
      <Outlet />
    </div>
  );
}

export default App;

Page-1.tsx

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

export default function Page1() {
  return (
    <div>
      <h2>Page 1</h2>
      <Link to={"/"}>Back</Link>
    </div>
  );
}

Page-2.tsx

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

export default function Page2() {
  return (
    <div>
      <h2>Page 2</h2>
      <Link to={"/"}>Back</Link>
    </div>
  );
}