React中的导航

Question

我刚开始学习如何使用React，我来自原生Android领域，我们使用fragments和Nav component等技术使我们的应用程序转换为seamless，同时保持较低的footprint。我从来都不是一个好的网络开发人员，但React的方法令人惊叹，而且很容易上手。我一直在做一个项目，因为React的组件方法，我设计它的方式是AppBar和Footer在主布局中，并渲染一次，然后我所有的应用程序内容都基本上发生了变化，下面是我的布局

return (<ThemeProvider theme={theme}>
<React.Fragment>
<ProminentAppBar selectedComponent={setSelectedComponent} />
<Container maxWidth="lg">
{getSignInDialog()}
{getSignUpDialog()}
{renderSelectedComponent()}
</Container>
<Footer />
<ScrollTop {...props}>
<Fab color="secondary" size="small" aria-label="scroll back to top">
<KeyboardArrowUpIcon />
</Fab>
</ScrollTop>
</React.Fragment>
</ThemeProvider>);

当应用程序启动时，它运行上面的代码，并根据renderSelectedComponent返回正确的内容，下面是renderSelectedComponent方法

const renderSelectedComponent = () => {
switch (selectedComponent.component) {
case Pages.HOME:
return <Home selectedComponent={setSelectedComponent} />;
case Pages.VIEW_VACANCY:
return <ViewVacancy selectedComponent={setSelectedComponent} />;
case Pages.POST_A_JOB:
return <PostAVacancy selectedComponent={setSelectedComponent} />;
case Pages.MY_PROFILE:
return <Profile selectedComponent={setSelectedComponent} />;
default:
return <Home selectedComponent={setSelectedComponent} />;
}
}

这个代码运行得很好，唯一的问题是，每当我按下后退按钮时，选项卡就会关闭，据我所知，它会关闭，因为浏览器没有保存Navigation的堆栈，对浏览器来说，应用程序仍然显示加载时首次显示的内容。我如何让浏览器跟踪更改，以便在我反击时显示以前的内容？

Answer 1

就像@Visakh Vijayan指出的那样，routerAPI是要走的路。事实证明，我过度设计了很多东西，所以我把renderSelectedComponent改成了这个

const getRoutes = () => {
return (
<Switch>
<Route path={HOME_PAGE_LINK} exact render={props =>
(<Home {...props}
selectedComponent={setSelectedComponent}
/>)} />
<Route path={VIEW_VACANCY_LINK} exact render={props =>
(<ViewVacancy  {...props}
selectedComponent={setSelectedComponent} />)}
/>
<Route path={CREATE_VACANCY_LINK} exact render={props =>
(<PostAVacancy {...props}
selectedComponent={setSelectedComponent} />)}
/>
<Route path={PROFILE_LINK} exact render={props =>
(<Profile selectedComponent={setSelectedComponent} />)}
/>
</Switch>)
}

我的布局

return (<ThemeProvider theme={theme}>
<React.Fragment>
<Router>
<ProminentAppBar selectedComponent={setSelectedComponent} />
<Container maxWidth="lg">
{getSignInDialog()}
{getSignUpDialog()}
{getRoutes()}
</Container>
<Footer />
<ScrollTop {...props}>
<Fab color="secondary" size="small" aria-label="scroll back to top">
<KeyboardArrowUpIcon />
</Fab>
</ScrollTop>
</Router>
</React.Fragment>
</ThemeProvider>);

有些人可能想知道为什么我保留了setSelectedComponent引用，我仍然使用它来传递数据和获取触发器。谢谢