redirect user to homepage if page not found react router, in React

Question

This is my main App component:

const router = createBrowserRouter([
  {
    element: <Root />,
    children: [
      { path: "/", element: <Users /> },
      { path: "/users", element: <Users /> },
      { path: "/places", element: <Places /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

I want to redirect user to homepage "/" if user enters any other route which is not in the routers. For example the user enters "/products" and I don't have this route defined so I want to redirect the user to homepage "/".

Answer 1

Well you can add the Homepage in children with path as "*" like below.

const router = createBrowserRouter([
  {
    element: <Root />,
    children: [
      { path: "/", element: <Users /> },
      { path: "/users", element: <Users /> },
      { path: "/places", element: <Places /> },
      { path: "*", element: <Homepage /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;