如何在菜单中的每个 <a href> 后不重新呈现根应用程序组件（使用 BrowserRouter/Switch）

Question

我是 frontend/React 的初学者，我在我的应用程序中发现了问题。所以我们有 3 个组件：

App (root) -> Application -> Menu

如果我从 Menu 中选择选项卡，它每次都会重新渲染 App 组件（我在那里有 init 函数，每次单击 Menu 中的某些内容后它都会重新初始化）。我怎么能改变我的代码，而不是那样做（我试过在应用程序中使用 useMemo，但它没有用，所以我认为我的菜单代码有些不正确）。

应用程序（root）：

const App = () => {

  i18next.init({(...)});

  return (
    <I18nextProvider i18n={i18next}>
      <OtherProviders>
         <Application />
      </OtherProviders>
    </I18nextProvider>
  );
}

export default App;

申请：

const Application = () => {
(...logic...)
return (
    <div>
        <div ref={node}>
            <FocusLock disabled={!open}>
                <Burger/>
                <Menu/>
            </FocusLock>
        </div>
        <BrowserRouter>
            <Switch>
                <Route path="/page1">
                    <Comp1/>
                </Route>
                <Route path="/page2"> 
                    <Comp2/>
                </Route>
            </Switch>
        </BrowserRouter>
    </div>
  );
}

export default Application;

菜单：

const Menu = () => {
  (...logic...)
  return (
    <StyledMenu>
      <a href="/page1" tabIndex={tabIndex}>
        <span aria-hidden="true">1</span>
        {t('menu.page1')}
      </a>
      <a href="/page2" tabIndex={tabIndex}>
        <span aria-hidden="true">2</span>
        {t('menu.page2')}
      </a>
    </StyledMenu>
  )
}

export default Menu;

每次点击后

<a href ...>

在菜单中我的应用程序重新加载所有应用程序，包括组件，因此每次单击菜单 href i18next 都会重新初始化。这里有什么问题，如何改变这种行为？

编辑：你是对的。我试过这个，但不在中，所以另外我不得不将代码更改为：

<BrowserRouter>
    <div ref={node}>
        <FocusLock disabled={!open}>
            <Burger/>
            <Menu/>
        </FocusLock>
    </div>
    <div>
        <Switch>
            <Route path="/page1">
                <Comp1/>
            </Route>
            <Route path="/page2"> 
                <Comp2/>
            </Route>
        </Switch>
    </div>
</BrowserRouter>

之后一切正常。

Answer 1

不要使用触发 html 加载新 uri

的而是使用 react-router-dom

中的 Link

<Link to="/">...</Link

Answer 2

您可以使用 react-router-dom

中的 Link 组件

import { Link } 'from react-router-dom';

<Link to="/page1">
  <span aria-hidden="true">1</span>
  {t('menu.page1')}
</Link>

如何在菜单中的每个 <a href> 后不重新呈现根应用程序组件（使用 BrowserRouter/Switch）

How to don't rerender root app component after every <a href> from menu (with BrowserRouter/Switch)

href

i18next

reactjs

react-router

react-router-dom