1. Xây dựng Components => Home, Containers => Application, Router => routes và types

C:\Users\Administrator\Desktop\reactrouter\src\index.tsx

import React from "react";
import { render } from "react-dom";
import { Application } from "./Containers/Application";
import "./styles.css";
const rootElement = document.getElementById("root");
render(<Application />, rootElement);

C:\Users\Administrator\Desktop\reactrouter\src\styles.css

html {
  min-height: 100%;
  height: 100%;
  margin: 0;
}
iframe {
  display: none;
}
body {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
}
html,
body,
input {
  background: #0f0f10;
  color: #ddd;
  min-height: 100%;
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
button {
  margin-right: 1rem;
}
strong {
  margin-left: 1rem;
}
#root {
  padding: 2rem;
  height: 100%;
  display: flex;
  max-width: 500px;
}
*,
*:before,
*:after {
  box-sizing: border-box !important;
}

C:\Users\Administrator\Desktop\reactrouter\src\Components\Home\index.tsx

export { Home } from "./Home";

C:\Users\Administrator\Desktop\reactrouter\src\Components\Home\Home.tsx

import React from "react";
export const Home: React.FC = () => <h1>Home</h1>;

C:\Users\Administrator\Desktop\reactrouter\src\Containers\Application\index.tsx

export { Application } from "./Application";

C:\Users\Administrator\Desktop\reactrouter\src\Containers\Application\Application.tsx

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Pages } from "../../routes";
export const ApplicationNavigator: React.FC = () => (
    <Switch>
      {Pages.map(route => (
        <Route key={route.path as string} {...route} />
      ))}
    </Switch>
);
export const Application: React.FC = () => (
  <Router >
    <ApplicationNavigator />
  </Router>
);

C:\Users\Administrator\Desktop\reactrouter\src\routes\index.ts

export { Pages, Routes, steps } from "./routes";

C:\Users\Administrator\Desktop\reactrouter\src\routes\routes.tsx

import React from "react";
import { RouteProps, Route } from "react-router-dom";
import { Home } from "../Components/Home";
import { Urls } from "../types/urls";
export const Pages: RouteProps[] = [
  { path: Urls.Home, component: Home, exact: true }
];
export const Routes: React.FC = () => (
  <>
    {Pages.map(route => (
      <Route key={route.path as string} {...route} />
    ))}
  </>
);
export const steps: { path: Urls }[] = Pages.map(({ path }) => ({
  path: path as Urls
}));

C:\Users\Administrator\Desktop\reactrouter\src\types\urls.ts

export enum Urls {
  Home = "/",
  About = "/about",
  Start = "/start",
  Info = "/info",
  Finish = "/finish"
}