Апрацоўка памылкі Not Found у React Router

Пры стварэнні прыкладання трэба звярнуць ўвагу і на з'яўленне розных памылак у працэсе яго далейшага выкарыстання. У гэтым уроке мы навучымся працаваць з памылкай 'Not Found'. Такая памылка можа з'явіцца, напрыклад, калі карыстальнік націсне на спасылку, якая вядзе на неіснующую старонку.

Для пачатку давайце адкрыем наша прыкладанне, якое мы рабілі на мінулых уроках, і заменім верстку кампанента Root. Цяпер пры запуску прыкладання ў нас будзе адлюстроўвацца спіс з двух прадуктаў:

routes/root.jsxfunction Root() {
  return (
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
  );
}

export default Root;

Дадамо трохі стыляў у index.css:

index.cssbody {
  font-size: 18px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: blue;
}

А зараз паспрабуйце націскаць на спасылкі. Паколькі у нас няма макетаў старонак для нашых прадуктаў, то спасылкі прывядуць нас толькі на экран з памылкай '404 Not Found' і дакору ў тым, што мы маглі б прыдумаць самі што-небудзь прыгажэй і цікавей, чым тое, што React Router адлюстраваў нам па змаўчанні.

Давайце зробім нашу ўласную старонку, якая будзе адлюстроўвацца ў выпадку з'яўлення памылкі 404. Для гэтага ў тэчцы src створым файлік error-page-404.jsx.

Унутры React кампанента ErrorPage404 мы скарыстаемся хукам useRouteError для перахопу памылкі, якую мы будзем выводзіць у кансоль:

error-page-404.jsximport { useRouteError } from 'react-router-dom';

function ErrorPage404() {
  const error = useRouteError();
  console.error(error);

}

export default ErrorPage404;

Далей у верстцы кампанента ErrorPage404 мы будзем адлюстроўваць пару загалоўкаў, якія паведамляюць пра памылку і вывядзем такія ўласцівасці аб'екта error, як statusText і data (аб'ект error і яго ўласцівасці вы таксама можаце ўбачыць, калі адкрыеце кансоль і пачнеце націскаць на нашы спасылкі ў прыкладанні).

error-page-404.jsxreturn (
  <div>
    <h1>Прывітанне! Гэта старонка памылкі</h1>
    <h2>404 Памылка Not Found</h2>
    <p>
      <i>{error.statusText}</i>
    </p>
    <p>
      <i>{error.data}</i>
    </p>
  </div>
);

Абавязкова не забудзьце адкрыць файл main.jsx і дадаць яшчэ адзін радок імпарту з ErrorPage404:

main.jsximport ErrorPage404 from './error-page-404';

А таксама дадайце яшчэ адну ўласцівасць errorElement у аб'ект Router - гэты элемент выводзіцца, калі на даным маршруце ўзнікае памылка. Значэннем элемента памылкі будзе наш кампанент ErrorPage404:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
  },
]);