react-router-dom v6：ScrollRestoration组件的正确放置标准咨询

放置标准 #

• 必须置于 Router 组件内部，因为它依赖路由上下文（组件内部的useScrollRestoration钩子需要访问路由上下文才能工作）。
• 最佳位置是包含Outlet的根路由组件（比如你的Root.tsx），或是所有路由的公共父组件中。这样组件能持续监听路由导航事件，确保每次页面跳转后都能触发滚动恢复逻辑。
• 禁止放在Router外部的根文件（如index.tsx）或未接入路由上下文的组件中。

现象原因 #

• 放在index.tsx/App.tsx导致黑屏：这些位置的ScrollRestoration不在Router提供的上下文范围内，组件无法获取必要的路由状态和导航事件，直接抛出上下文缺失的错误，导致整个页面渲染失败。
• 放在Root.tsx正常生效：Root.tsx作为包含Outlet的路由组件，本身处于路由上下文内部，能正确接收路由导航的触发信号，从而执行滚动位置恢复的逻辑。

内容的提问来源于stack exchange，提问作者Jay