React Router – 404 error handling

Lalu pada homepage kita import Navbar.js

bagaimana kalau user mengetikkan alamat yang berbeda? saat ini hanya ada 2 routes yaitu / dan /about-us. Jika user mengetikkan /contact-us akan muncul error. Lalu bagaimana caranya menghandle error tersebut?

Untuk itu kita perlu membuat sebuah page untuk menampilkan pesan error dan menggunakannya sebagai default response ketika terdapat routes error.

import React from 'react';

const Error = () => {
  return <div>Error</div>;
};

export default Error;

lalu gunakan page ini sebagai error element pada route ‘/’

import React from 'react';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';
import Aboutus from './Pages/Aboutus';
import Homepage from './Pages/Homepage';
import MainLayout from './Pages/MainLayout';
import Error from './Pages/Error';

function App() {
  const router = createBrowserRouter([
    {
      path: '/',
      element: <MainLayout />,
      errorElement: <Error />,
      children: [
        { path: '/', element: <Homepage /> },
        { path: '/about-us', element: <Aboutus /> },
      ],
    },
  ]);
  return <RouterProvider router={router} />;
}

export default App;