how to implement website navigation with reactjs

Question

Hi I am developing a website using reactjs. Each page of the website has mainly 3 parts (1. header 2. body 3. footer) . So header and footer will be same for each page and body will keep on changing. Should I create header and footer components and then include them in each page of the website. Is this good design?

How can I highlight navigation menu option for a particular page. For example If I am on contactus page then ContactUs menu option should be highlighted. Similarly If I am one Home Page then "Home" should be highlighted.

very good question. I am also interested in exactly these 2 things. — ACV
– ACV, Commented Oct 5, 2019 at 20:30

Håken Lid · Accepted Answer · 2018-02-21 18:36:50Z

6

In react apps you usually use a router library for this.

A router also takes care of the url in the address bar, so you can save and share links to sub pages in a single page application, and use the browser's back button.

The most popular router for react is called "React Router", but there are other alternatives. It's even possible to write your own router.

React-router's docs has examples of how you can implement this. For the highlighting effect, you can use the component called <NavLink />

Instead of including the header and footer in each page, you start from the outside in. You only put header and footer in once, typically in a main <App />, and then include variable page content inside <Route /> components.

edited Feb 21, 2018 at 18:36

answered Feb 21, 2018 at 18:31

Håken Lid

23.2k10 gold badges58 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Imran Qureshi · Accepted Answer · 2018-02-21 19:08:31Z

yes you can create 2 components on the top level. they will be header and footer. for navigation; you can use react-router. it will be used to navigate between views. you can put the body component inside your header component your main App structure can be :-

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

now you can set react-router to change the component being render in body place when any link in the header is clicked. you can also keep the state of currently active view and highlight its color when active.

in react-router v4 you can use switch and route to change between components

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

this will be your body component , other components like given above will be shown when you click on the link in the head that matches the path in Route tag. now you header render can be like this.

render(){
    return (

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

the topbar will be fixed and stay on top , the body will have all the space except the margin on top to adjust below the topbar

your topbar can be like this.

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

as for you want to highlight the current view , you can keep the state array and add give each Link the value from that array , and put onMouseDown on it , when it is clicked it will callback telling the value that is clicked and u will reset all the items background color to default , then you can set the style of that particular active item in your header to active color. you should use inline styling for that instead of className

You are fixing body component with header assuming it will not change <div> <TopBar/> <BodyComp/> <div/> Here <BodyComp> will keep on changing as per the link.

Collectives™ on Stack Overflow

how to implement website navigation with reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related