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

Posted 2023-02-22

【中文标题】React Router v6 `useRouter` Hook with `basename` 和 Redirection

【英文标题】：React Router v6 `useRouter` Hook with `basename` and Redirection

【发布时间】：2021-12-24 02:00:12

【问题描述】：

以下代码 sn-p 解释了我如何定义应用程序路由。

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

我想为所有可用路由定义一个basename。因此，每条路由都需要在前面加上/ui/ basename。 '/' 也应该被重定向到 '/ui/'。

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

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

但是，它不再起作用了。

【参考方案1】：

看起来当前的 API 还是很相似的。

useRoutes

类型声明

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');