如何用reactjs实现网站导航

Question

你好，我正在使用reactjs开发一个网站。网站的每个页面主要有3个部分（1. header 2. body 3. footer）。因此，每个页面的页眉和页脚都是相同的，而正文将不断变化。我应该创建页眉和页脚组件，然后将它们包含在网站的每个页面中吗？这是好的设计吗？

如何突出显示特定页面的导航菜单选项。例如，如果我在联系我们页面上，则应突出显示“联系我们”菜单选项。同样，如果我是一个主页，那么“主页”应该突出显示。

Answer 1

在 React 应用程序中，您通常使用路由器库来实现此目的。

路由器还负责处理地址栏中的 URL，因此您可以在单页面应用程序中保存和共享子页面的链接，并使用浏览器的后退按钮。

最流行的 React 路由器称为“React Router”，但还有其他替代方案。甚至可以编写自己的路由器。

React-router 的文档提供了如何实现这一点的示例。对于突出显示效果，您可以使用名为<NavLink />

您无需在每个页面中包含页眉和页脚，而是从外向内开始。只需将页眉和页脚放入一次（通常在 main 中），<App />然后在<Route />组件内包含可变的页面内容。