react-router-v6中如何使用AliveScope

[huangchucai]

如下代码片段

const router = createBrowserRouter([
  {
    path: "/",
    errorElement: <ErrorPage/>,
    element: <KeepAlive  cacheKey="UNIQUE_ID"><App/></KeepAlive>,
    loader: appLoader,
    },
  },
  {
    path: "/detail",
    element: <Detail/>
  }
]);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <AliveScope>
      <RouterProvider router={router}/>
    </AliveScope>
)

我如果按照这样写，又违背了如下的建议：

Note: When used with react-router or react-redux, you need to place inside or

那请问一下，如果正确的包裹呢？能不能提供一个建议例子

[CJY0208]

react-router 6 应该有 RouterProvider 和 routeConfig 分开配置的方式吧，这样可以让 AliveScope 放置到 RouterProvider 内部，具体需要看 router 6 的文档了

[huangchucai]

查看了文档，新版的配置好像并没有提供分开的方式，如果这样使用有什么影响吗？

  <AliveScope>
    <RouterProvider router={router}/>
  </AliveScope>

[CJY0208]

会导致 route element 脱离 router 上下文，无法使用 router 的 各种 hooks，具体参考 KeepAlive 的原理部分

单独放置 BrowserRouter https://reactrouter.com/en/main/router-components/browser-router

单独放置 routeConfigs https://reactrouter.com/en/main/hooks/use-routes

[huangchucai]

BrowserRouter 已经不在推荐使用，目前官方推荐的使用方式是

[createBrowserRouter]
[createMemoryRouter]
[createHashRouter]
[createStaticRouter]

https://reactrouter.com/en/main/routers/picking-a-router

[CJY0208]

那就使用 element layouts 的方式来挂载 AliveScope 吧

const routes = [
  {
    path: '/',
    element: (
      <AliveScope><Outlets /></AliveScope>
    ),
    children: ...
  }
]

[huangchucai]

会导致 route element 脱离 router 上下文，无法使用 router 的 各种 hooks，具体参考 KeepAlive 的原理部分

单独放置 BrowserRouter https://reactrouter.com/en/main/router-components/browser-router

单独放置 routeConfigs https://reactrouter.com/en/main/hooks/use-routes

https://codesandbox.io/s/crimson-meadow-t9zmrr?file=/src/index.js 这个线上代码我包裹后还是可以使用正常的hook，能提供一个最佳实践吗?

[CJY0208]

没问题就行，有问题的话再看怎么改吧

我没有在使用 createBrowserRouter，无法提供最佳实践

[huangchucai]

好的，感谢回复~正常感觉应该是包裹在里面的，但是神奇的是我包裹在外面也没有异常

[huangchucai]

那就使用 element layouts 的方式来挂载 AliveScope 吧

const routes = [
  {
    path: '/',
    element: (
      <AliveScope><Outlets /></AliveScope>
    ),
    children: ...
  }
]

这种方式我尝试了一下，是不可以的