使用 React-router 做出反应：我是否根据路线从顶部渲染所有内容然后 show/hide？

Question

困惑：单页应用：初始显示第1页，有一个按钮可以切换到第2页。

应用中的主渲染应该是：

return {
<div>
    <page1/>
    <page2/>
</div>
}

然后用state判断一个页面是否show/hidden?

还是因为路由而呈现page2？我想是因为状态在 page1 上的按钮的 onclick 中发生了变化以反映新的 'currentPage' 然后主应用程序将自动重新呈现。

没有 react-router 我想我明白了：但是有了 routes 我似乎把自己弄糊涂了。

Answer 1

React Router 处理显示基于 URL 的视图。如果按钮不更改 URL（例如，它仅更改某些内部状态），您将使用 App 中的状态有条件地呈现 Page1 或 Page2。

但是，如果 URL 应该决定是否应该渲染 Page1 或 Page2，您将在 React Router 配置中设置它，并且您不会手动渲染任何一个其中之一（React Router 会自动决定为您呈现什么）。然后按钮将简单地 link 到新的 URL （通过 React Router 的 <Link /> 标签或通过 this.context.router 上的 API）而不是改变状态。

使用 React-router 做出反应：我是否根据路线从顶部渲染所有内容然后 show/hide？

React with React-router: do I render everything from the top then show/hide depending on route?

reactjs

react-router