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

  1. C:\Users\Administrator\Desktop\reactrouter\test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h2>Bước 2: Thực hiện router</h2>
	<p>Bài toán nhiệm vụ cho Pages</p>
	<pre>
		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 }
		];
	</pre>
	<p>Lấy ra</p>
	<pre>
		[{path: "/"},{path: "/about"}, {path: "/start"}, {path: "/info"}, {path: "/finish"}]
	</pre>
	<p>RouteProps, Route</p>
	<p>import { Home } from "../Components/Home";</p>
	<p>export const Pages: RouteProps[] = [{ path: Urls.Home, component: Home, exact: true }]</p>
	<p>export const Routes: React.FC = () => ()</p>
	<p>export const steps: { path: Urls }[] = Pages.map(({ path }) => ({path: path as Urls}));</p>
</body>
</html>

Chi tiết const history = useHistory();

console.log(history);

Chi tiết của steps

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

export const steps: { path: Urls }[] = Pages.map(({ path }) => ({
  path: path as Urls
}));

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

import { steps as currentSteps } from "../../routes";
console.log(currentSteps);

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 } = useStepper();
  return (
    <section className="navigator-main__container">
      <div className="navigator-main__content">{children}</div>
      <div className="navigator-button__container">
        <button
          className="btn-secondary"
        >
          BACK
        </button>
        <button
          className="btn-primary"
          onClick={nextStepAction}
        >
          NEXT
        </button>
      </div>
    </section>
  );
};

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";
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\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]);
  useEffect(() => {
    if (currentStep === -1) {
      return;
    }
   const { path } = currentSteps[currentStep];
    history.push({
      pathname: path,
      state: { previousPath: history.location.pathname }
    });
  }, [currentStep, history]);
   return {
    currentSteps,
    currentStep,
    nextStepAction
  };
};
Previous1. Xây dựng Components => Home, Containers => Application, Router => routes và typesNextMột cách ít khi gặp khi sử dụng ở 2. Xây dựng chức năng nextStepAction của Navigator (ok)

Last updated

Was this helpful?