我希望我的某个组件在更改路由时不卸载。
因为每次它卸载和装载时,它都会发生变化。
它应该挂载一次,当我点击它的路线,不应该重新渲染。如果第二次挂载时,我去另一个页面,然后回来,它会在屏幕上显示不同的东西(因为它取决于一个随机数变量),这是不想要的。如何解决这个问题?
这是我代码。
<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组件。
1条答案
按热度按时间wecizke31#
在使用React Router的典型React应用程序中,导航到不同的路由将导致与以前的路由关联的组件被卸载,而与新路由关联的组件将被装载。这是不能更改的。
但是,如果组件在
<Switch>
或<Route>
组件之外呈现,则即使导航到其他路线,它也将保持挂载状态。此外,您可以将“随机数变量”移动到路由上方的状态,并将该值向下传递到路由中渲染的组件(当/如果它们被重新渲染,数据将是相同的)