3. Xây dựng chức năng previousStepAction của Navigator (ok)

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 { About } from "../Components/About";
import { Start } from "../Components/Start";
import { Info } from "../Components/Info";
import { Finish } from "../Components/Finish";
import { Urls } from "../types/urls";
const someValue: any = "string";
const strLength: number = (someValue as string).length;
export const Pages: RouteProps[] = [
  { path: Urls.Home, component: Home, exact: true },
  { path: Urls.About, component: About, exact: true },
  { path: Urls.Start, component: Start, exact: true },
  { path: Urls.Info, component: Info, exact: true },
  { path: Urls.Finish, component: Finish, 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\Containers\Navigator\Navigator.tsx

import React from "react";
import "./Navigator.css";
import { useStepper } from "./../../hooks/useStepper";
export const Navigator: React.FC = ({ children }) => {
  const { nextStepAction, previousStepAction } = useStepper();
  return (
    <section className="navigator-main__container">
      <div className="navigator-main__content">{children}</div>
      <div className="navigator-button__container">
        <button
          onClick={previousStepAction}
          className="btn-secondary"
        >
          BACK
        </button>
        <button
          className="btn-primary"
          onClick={nextStepAction}
        >
          NEXT
        </button>
      </div>
    </section>
  );
};

C:\Users\Administrator\Desktop\reactrouter\src\hooks\useStepper\useStepper.tsx

import { useEffect, useState, useCallback } from "react";
import { useHistory } from "react-router-dom";
import { assert } from "../../util";
import { steps as currentSteps } from "../../routes";
export const useStepper = () => {
  const history = useHistory();
  const getCurrentStepIndex = useCallback(
    () => currentSteps.findIndex(step => step.path === history.location.pathname), [history.location.pathname]
  );
  const [currentStep, setCurrentStep] = useState(getCurrentStepIndex());
  const nextStepAction = useCallback(() => {
    const index = getCurrentStepIndex();
    if (index === currentSteps.length - 1) {
      return;
    }
    setCurrentStep(index + 1);
  }, [getCurrentStepIndex]);
  const previousStepAction = useCallback(() => {
    const index = getCurrentStepIndex();
    if (index === 0) {
      return;
    }
    setCurrentStep(index - 1);
  }, [getCurrentStepIndex]);
  useEffect(() => {
    if (currentStep === -1) {
      return;
    }
   const { path } = currentSteps[currentStep];
    history.push({
      pathname: path,
      state: { previousPath: history.location.pathname }
    });
  }, [currentStep, history]);
   return {
    currentSteps,
    currentStep,
    nextStepAction,
    previousStepAction,
  };
};