Closed huangchucai closed 1 year ago
react-router 6 应该有 RouterProvider 和 routeConfig 分开配置的方式吧,这样可以让 AliveScope 放置到 RouterProvider 内部,具体需要看 router 6 的文档了
查看了文档,新版的配置好像并没有提供分开的方式,如果这样使用有什么影响吗?
<AliveScope>
<RouterProvider router={router}/>
</AliveScope>
会导致 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
BrowserRouter 已经不在推荐使用,目前官方推荐的使用方式是
[createBrowserRouter]
[createMemoryRouter]
[createHashRouter]
[createStaticRouter]
那就使用 element layouts 的方式来挂载 AliveScope 吧
const routes = [
{
path: '/',
element: (
<AliveScope><Outlets /></AliveScope>
),
children: ...
}
]
会导致 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,能提供一个最佳实践吗?
没问题就行,有问题的话再看怎么改吧
我没有在使用 createBrowserRouter,无法提供最佳实践
好的,感谢回复~正常感觉应该是包裹在里面的,但是神奇的是我包裹在外面也没有异常
那就使用 element layouts 的方式来挂载 AliveScope 吧
const routes = [ { path: '/', element: ( <AliveScope><Outlets /></AliveScope> ), children: ... } ]
这种方式我尝试了一下,是不可以的
如下代码片段
我如果按照这样写,又违背了如下的建议:
那请问一下,如果正确的包裹呢?能不能提供一个建议例子