控制面板如下所示:
export default function Dashboard({ children }) {
return (
<>
<DashboardLayout menu={menu}>
<DashboardPage variant="cards" flow="one-one">
{children}
</DashboardPage>
</DashboardLayout>
</>
)
}
Jmeter 板在左侧有一个侧边栏菜单,允许在不同的 Jmeter 板页面之间导航。因为 Jmeter 板页面都共享menu
、sidebar
、footer
等组件,所以理想情况下我不想重新呈现这些组件。
如果我使用Next.JS原生<Link>
组件,那么所有组件都将重新呈现。
我看到的唯一替代方法是使用像useState
或useReducer
这样的React钩子来设置哪些页面被呈现为这样:
export default function Dashboard() {
const [state, dispatch] = useReducer();
return (
<>
<DashboardLayout menu={menu}>
<DashboardPage variant="cards" flow="one-one">
{state == 'page1' && <DashboardPage1 />}
{state == 'page2' && <DashboardPage1 />}
{state == 'page3' && <DashboardPage1 />}
...
{state == 'pageN' && <DashboardPageN />}
</DashboardPage>
</DashboardLayout>
</>
)
}
是否有办法使用路由(如或useRoute钩子)并避免重新呈现某些组件?例如,每当我在 Jmeter 板页面之间切换时,我看到“DashboardLayout”中的控制台日志(不需要重新呈现)被打印了4次。
1条答案
按热度按时间vdgimpew1#
可以使用NextJS和NextJS Router的内置标签
或者,您可以使用react-router-DOM进行导航,方法是使用useNavigate钩子