如何使用 reactjs 實現網站導航

Question

嗨，我正在使用 reactjs 開發一個網站。 網站的每個頁面主要有 3 個部分（1. 頁眉 2. 正文 3. 頁腳）。 因此，每個頁面的頁眉和頁腳都是相同的，並且正文會不斷變化。 我應該創建頁眉和頁腳組件，然后將它們包含在網站的每個頁面中。 這是好的設計嗎？

如何突出顯示特定頁面的導航菜單選項。 例如，如果我在 contactus 頁面上，那么 ContactUs 菜單選項應該突出顯示。 同樣，如果我是一個主頁，則應突出顯示“主頁”。

Answer 1

在 React 應用程序中，您通常為此使用路由器庫。

路由器還會處理地址欄中的 url，因此您可以在單頁應用程序中保存和共享子頁面的鏈接，並使用瀏覽器的后退按鈕。

最流行的反應路由器稱為“反應路由器”，但還有其他選擇。 甚至可以編寫自己的路由器。

React-router 的文檔中提供了如何實現這一點的示例。 對於高亮效果，您可以使用名為<NavLink />的組件

不是在每個頁面中包含頁眉和頁腳，而是從外到內。您只需將頁眉和頁腳放入一次，通常在主<App /> ，然后在<Route />組件中包含可變頁面內容。

Answer 2

是的，您可以在頂層創建 2 個組件。 它們將是頁眉和頁腳。 用於導航； 你可以使用反應路由器。 它將用於在視圖之間導航。 您可以將主體組件放在標題組件中，您的主要應用程序結構可以是：-

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

現在您可以設置 react-router 以更改在單擊標題中的任何鏈接時在正文位置呈現的組件。 您還可以保持當前活動視圖的狀態並在活動時突出顯示其顏色。

在 react-router v4 中，您可以使用 switch 和 route 在組件之間進行更改

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

這將是您的身體組件，當您單擊與 Route 標簽中的路徑匹配的頭部鏈接時，將顯示上面給出的其他組件。 現在您的標題渲染可以是這樣的。

render(){
    return (

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

頂部欄將固定並保持在頂部，主體將擁有除頂部邊距外的所有空間以在頂部欄下方進行調整

你的頂欄可以是這樣的。

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