javascript 如果在React中未找到react路由器,则将用户重定向到主页

jmp7cifd  于 2023-02-15  发布在  Java
关注(0)|答案(3)|浏览(127)

这是我的主要App组件:

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;

如果用户输入路由器中没有的任何其他路由,我想将用户重定向到主页"/"。例如,用户输入"/products",而我没有定义此路由,所以我想将用户重定向到主页"/"

fdbelqdn

fdbelqdn1#

那么你可以添加的主页在儿童与路径为“*”像下面。

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;
thtygnil

thtygnil2#

在路径中使用 * 字符,* 表示所有路由:

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

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

export default App;
hk8txs48

hk8txs483#

对于任何路径,都应该呈现到主"/"路由的重定向(* 即使用通配符"*"匹配器 *)应用没有专门为渲染匹配的路由。由于主路由"/""/users"都渲染相同的Users组件内容,您可以通过将任何“未知”路径重定向到"/users"来简化此操作。这样就消除了冗余路由。
示例:

import {
  createBrowserRouter,
  Navigate
} from 'react-router-dom';

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

相关问题