Unexpected Application Error! 404 Not Found in App.js

I received the error message "Unexpected Application Error! 404 Not Found" when I opened localhost:3000/chunk in my browser.

Below is my code for App.js:

function App() {
  
  const { currentUser } = useContext(AuthContext);

  const queryClient = new QueryClient();

  const Layout = () => {
    return (
      <QueryClientProvider client={queryClient}>
        <div className="page">
          Layout
        </div>
      </QueryClientProvider>
    );
  };

  const ProtectedRoute = ({ children }) => {
    if (!currentUser) {
      return <Navigate to="/login" />;
    }
    return children;
  };

  const router = createBrowserRouter([
    {
      path: "/",
      element: (
        <ProtectedRoute>
          <Layout />
        </ProtectedRoute>
      ),
      children: [
        {
          path: "/",
          element: <Home />,
        },
        {
          path: "/chunk/:id",
          element: <Chunk />,
        },
      ],
    },
    {
      path: "/login",
      element: <Login />,
    },
    {
      path: "/register",
      element: <Register />,
    },
  ]);
  
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

When I opened the Console in the browser, the error message says "No routes matched location "/chunk" ".

The error message clearly indicates the issue, In App.js you have path: "/chunk/:id" but you are navigating to /chunk which is not defined. Therefore, "No routes matched location /chunk"

From React Router

Dynamic Segments

If a path segment starts with : then it becomes a "dynamic segment". When the route matches the URL, the dynamic segment will be parsed from the URL and provided as params to other router APIs.

If it's meant to be a dynamic page, the url should be /chunk/1 for example.

If it's meant to be a static page, you should change "/chunk/:id" to "/chunk".