避免在 React Router 中重新渲染布局答案

【问题标题】：Avoid rerendering a layout in React Router避免在 React Router 中重新渲染布局
【发布时间】：2021-12-30 06:58:03
【问题描述】：

我在前面的所有路线中都使用了一个布局。使用 react-router-dom 管理路由。在这一点上一切都很完美，问题是当我导航到不同的路线时，就在那一刻，布局（背景和导航栏）与被调用的组件一起重新加载。 notorius 是不是一闪而过。

Layout.js

export default function Layout({children}) {
    return (
        <>
            <div className="App bg-gray-900 h-screen w-screen relative overflow-hidden flex flex-col justify-center items-center">
                <SideBar />
                <div className="h-40-r w-40-r bg-gradient-to-r from-green-400 to-blue-500 rounded-full absolute  left-2/3 -top-56 transform rotate-160 animate-animation"></div>
                <div className="h-35-r w-35-r bg-gradient-to-r from-red-400 via-pink-500 to-purple-500 rounded-full absolute top-96 -left-20 animate-animation "></div>
                {children}
            </div>
        </>
    )
}

在这种方法中，我正在调用此布局中的其他组件。

Router.js

export default function AppRouter() {
    return (
            <Routes>
                <Route path="/" element={<Index />}/>
                <Route path="/tasks" element={<Tasks />}/>
                <Route path="/test" element={<Test />}/>
            </Routes>
    )
}

App.js

export default function App() {
  return (
    <div>
      <Router >  
        <Layout>
          <AppRouter />
        </Layout>
      </Router>
    </div>
  );
}

我不知道这个文件做得好不好

为了得到答案，我做了一些修改，例如在每个页面中应用布局，控制加载顺序，但直到现在还没有结果。

【问题讨论】：

我无法在此codesandbox 中重现任何“闪烁”问题。也许你没有分享足够多的代码让我们理解当路由改变时它所做的一切。 Layout 应该保持安装状态，因此唯一可能“闪烁”的是路由组件在旧卸载和新安装时切换。
嗨！感谢您的帮助，这很棒，带我去解决问题。所有的代码都可以，但我不好，我正在测试直接在浏览器中编写它的路由，而不是使用标记。你的沙盒让我对此大开眼界。
好的，很高兴能帮上忙。干杯。

标签： reactjs react-router react-router-dom react-component

【解决方案1】：

尝试在<Router> 之外在App.js 中调用<Layout>。

export default function App() {
  return (
    <div>
      <Router >  
          <AppRouter />
      </Router>
      <Layout />
    </div>
  );
}

【讨论】：

【解决方案2】：

这解决了重新渲染问题，而不是孩子使用路由器插座。

查看here

import { Outlet } from "react-router-dom";

export default function Layout() {
  return (
    <>
      <div className="App bg-gray-900 h-screen w-screen relative overflow-hidden flex flex-col justify-center items-center">
        <SideBar />
        <div className="h-40-r w-40-r bg-gradient-to-r from-green-400 to-blue-500 rounded-full absolute  left-2/3 -top-56 transform rotate-160 animate-animation"></div>
        <div className="h-35-r w-35-r bg-gradient-to-r from-red-400 via-pink-500 to-purple-500 rounded-full absolute top-96 -left-20 animate-animation "></div>
        <Outlet />
      </div>
    </>
  );
}

【讨论】：

【解决方案3】：

解决方案： 路由应该使用<Link /> 标签进行测试。我正在浏览器中测试路由。

<li>
  <Link to="tasks">Tasks</Link>
</li>
<li>
  <Link to="/">Home</Link>
</li>

【讨论】：