在 ReactJS 的“第 2 页”上启动“3 页”单页网站答案

【问题标题】：Starting a "3 page" Single Page Website on the "2nd page" in ReactJS在 ReactJS 的“第 2 页”上启动“3 页”单页网站
【发布时间】：2018-09-28 17:50:28
【问题描述】：

所以我开始掌握 ReactJS 并为自己构建了一个基本的单页网站 (SPW?)。

目前只有 1 个“页面”（实际上只是一个横跨整个屏幕的区域），用户可以通过单击按钮（或仅滚动）向下滚动到第二个“页面”。

现在我需要做的是让用户也能够向上滚动...到另一个“页面”。

内容区 1

&uparrow;

登陆区域（用户必须在网站初始加载时转储到此处）

&向下箭头;

内容区 2

我希望这是有道理的？

编辑：对“SPA”的错误使用表示歉意……我已经了解了它与单页网站之间的区别。

【问题讨论】：

react 路由器的 HashRouter 可以提供帮助 - github.com/ReactTraining/react-router/blob/master/packages/… 和 reacttraining.com/react-router/web/api/HashRouter
所以你想设置页面的初始滚动位置，这似乎就是你所需要的。您可以使用scrollIntoView -> developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView 或其他方法设置它，具体取决于您的浏览器支持要求
老实说，我不太明白这个问题，我同意 Vladimir 的观点，即您可以在页面加载时滚动到“着陆区”。查看this Codepen 了解一下。然后特定于 React，您不能直接引用 DOM 元素并且需要使用 refs，但这是一个不同的主题。
@VelimirTchatchevsky 谢谢你，我会调查的 :)
@rm- 感谢 CodePen！我担心会涉及到滚动动画，但这回答了它...... :)

标签： reactjs single-page-application

【解决方案1】：

“单页应用程序”并不意味着您实际上将所有内容都放在一个页面上。您可以拥有不同的“页面”，但是加载它们不会导致页面刷新，因为它们不是服务器提供的新 html 页面。如果您希望人们能够导航到您的 SPA 中的不同“页面”，您应该查看 React Router，否则您可以查看 window scrolling 以便您可以上下移动。

【讨论】：

啊.. 好吧，这填补了我的理解中的一两个漏洞。谢谢，请原谅我的无知：P

【解决方案2】：

据我了解，您正在尝试构建一个页面网站，其中您链接的每个内容部分都与内部页面链接并添加按钮供用户滚动顶部/底部。它不是单页应用程序。它是单页网站。但是，对于学习曲线，最好开始。

【讨论】：

应该是评论