小编sno*_*cat的帖子

我有一个 React 应用程序，其中的 URL 使用 React Router 定义：

const App: React.FC = (): JSX.Element => {
  return (
    <Router>
      <Switch>
        <Redirect exact from="/" to="/rules" />
        <Route
          exact
          path={["/rules", "/rules/:placeId"]}
          component={LandingPage}
        />
        <Route
          exact
          path={["/route", "/route/:start/:end"]}
          component={RoutePage}
        />
      </Switch>
    </Router>
  );
};

如果 url 包含这样的哈希部分，我想允许用户转到文档的特定手风琴部分/rules/someplace#accordion-3

我有一个返回相关手风琴的组件，它们都有一个 id：

const CategoryDisplay: React.FC<Props> = (props) => {
...
  return (
    <>
      <Accordion
        id={`category-${accordion.id}`}/>
    </>
  );
};

export default CategoryDisplay;

当我打开带有锚点的 URL 时（就像/rules/someplace#accordion-3我已经在页面上一样），一切正常并且滚动到该元素。但是，在页面初始加载时，此行为不起作用。

仅在页面加载后我将如何滚动到该元素？