React Router v6 `useRouter` Hook with `basename` 和 Redirection

Question

以下代码片段解释了我如何定义应用程序路由。

let routes = useRoutes([
    { path: '/', element: <Home /> },
    {
      path: 'users',
      element: <Users />,
      children: [
        { path: '/', element: <UsersIndex /> },
        { path: ':id', element: <UserProfile /> },
        { path: 'me', element: <OwnUserProfile /> },
      ]
    }
  ]);

我想为所有可用路由定义一个basename 。 因此，每条路由都需要预先添加/ui/名。 '/'也应该重定向到'/ui/' 。

以前，在 beta 阶段，可以将 basename 定义如下：

  const routes = useRoutes(appRoutes, { basename: 'ui' });

但是，它不再起作用。

Answer 1

看起来当前的 API 仍然非常相似。

使用路由

类型声明

declare function useRoutes( routes: RouteObject[], location?: Partial<Location> | string; ): React.ReactElement | null;

它仍然需要一个字符串基本位置，但现在它不是一个“配置”对象，而是一个Location或一个字符串。

作为参考，这里是Location类型声明：

 interface Location<S extends State = State> { pathname: string; search: string; hash: string; state: S; key: string; }

因此，您似乎可以使用位置部分并指定pathname属性或字符串。

const routes = useRoutes(appRoutes, { pathname: 'ui' });
const routes = useRoutes(appRoutes, 'ui');