CODEWITHSUNDEEP
reactjs
hitesh
hitesh

Reputation: 499

how to implement website navigation with reactjs

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.

Upvotes: 5

Views: 6785

Answers (2)

Imran Qureshi
Imran Qureshi

Reputation: 168

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

Upvotes: 1

H&#229;ken Lid
H&#229;ken Lid

Reputation: 23064

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.

Upvotes: 6

Related Questions