Question

您好我正在使用reactjs开发一个网站。网站的每一页主要有3个部分（1.标题2.正文3.页脚）。因此页眉和页脚对于每个页面都是相同的，并且正文将继续改变。我应该创建页眉和页脚组件，然后将它们包含在网站的每个页面中。这是好设计吗？

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

Answer 1

是的，你可以在顶层创建2个组件。它们将是页眉和页脚。用于导航;你可以使用react-router。它将用于在视图之间导航。您可以将主体组件放在标题组件中，主App结构可以是： -

<App>
   <HeaderComp/>    
   <FooterComp/>
</App>

现在，您可以设置react-router，以便在单击标题中的任何链接时更改正在渲染的组件。您还可以保持当前活动视图的状态，并在活动时突出显示其颜色。

在react-router v4中，您可以使用开关和路由在组件之间进行更改

<Switch>
      <Route exact path='/' component={YourComponent} />
      <Route path='/secondcomponent' component={YourSecondComponent} />
      <Route path='/thirdcomponent' component={YourthirdComponent} />                      
</Switch>

这将是您的身体组件，当您单击头部中与Route标记中的路径匹配的链接时，将显示上面给出的其他组件。现在你的标题渲染可以是这样的。

render(){
    return (

      <div>
           <TopBar/>
           <BodyComp/>
      <div/>
    )
}

顶杆将被固定并保持在顶部，主体将具有除顶部边缘以外的所有空间以在顶杆下方调整

你的topbar可以是这样的。

render(){
   return(
     <div className="topBarcontainer">
        <Link to="/" >
         <div className ="topBarItem">
               Home 
         </div> 
        </Link>
        <Link to="/secondComponent" >
         <div className ="topBarItem">
              secondComponent
         </div> 
        </Link>
     </div>
   )
}

至于你想要突出当前视图，你可以保持状态数组并添加给每个链接从该数组中的值，并在其上放置onMouseDown，当它被点击时它会回调告诉被点击的值和您将所有项目背景颜色重置为默认值，然后您可以将标题中特定活动项目的样式设置为活动颜色。你应该使用内联样式而不是className

Answer 2

在反应应用程序中，您通常会使用路由器库。

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

最受欢迎的反应路由器称为＆＃34;反应路由器＆＃34;，但是there are other alternatives.甚至可以编写自己的路由器。

React-router's docs has examples of how you can implement this.对于突出显示效果，您可以使用名为<NavLink />

的组件

不是在每个页面中包含页眉和页脚，而是从外部开始。您只需将页眉和页脚放入一次，通常在主<App />中，然后在{{1}中包含变量页面内容组件。

如何用reactjs实现网站导航

2 个答案: