reactjs 如何在React-router 6更改路由时防止组件被卸载

lx0bsm1f  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(324)

我希望我的某个组件在更改路由时不卸载。
因为每次它卸载和装载时,它都会发生变化。
它应该挂载一次,当我点击它的路线,不应该重新渲染。如果第二次挂载时,我去另一个页面,然后回来,它会在屏幕上显示不同的东西(因为它取决于一个随机数变量),这是不想要的。如何解决这个问题?
这是我代码。

<Routes>
      <Route path='/' element={<Start />} />
      <Route path='/questions' element={<SharedLayoutQuestions />}>
        <Route index element={<SharedLayoutQuestions firstQuestion={true} />}        />
        <Route path='/questions/:questionIndex' element={<SingleQuestion />} />
      </Route>
      <Route path='*' element=<NotFound /> />
    </Routes>

我希望在问题路径中更改页面时不卸载我的SharedLayoutQuestions SingleQuestion组件。

wecizke3

wecizke31#

在使用React Router的典型React应用程序中,导航到不同的路由将导致与以前的路由关联的组件被卸载,而与新路由关联的组件将被装载。这是不能更改的。
但是,如果组件在<Switch><Route>组件之外呈现,则即使导航到其他路线,它也将保持挂载状态。
此外,您可以将“随机数变量”移动到路由上方的状态,并将该值向下传递到路由中渲染的组件(当/如果它们被重新渲染,数据将是相同的)

相关问题