It’s important to reduce the code a professional project, so now we will see how to create a dynamic header/navbar for a project which will use on every page.
So, at first, need to create a javascript file into the imports/ui/ folder, let’s create this which name as like DynamicHeader.js & write some codes as like below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from 'react'; import {Link} from 'react-router-dom' const DynamicHeader = (props) => { return ( <div className="header"> <div className="header__content"> <h1 className="header__title">{props.title}</h1> <ul className="navbar-nav"> <Link className="nav-link" to="/">Home</Link> <Link className="nav-link" to="/search">Search</Link> </ul> <button className="button button--link-text">Logout</button> </div> </div> ); }; export default DynamicHeader; |
Now we will render this constant function into my pages where need the same navigation, so see the below example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react'; import DynamicHeader from './DynamicHeader'; export default () => { return ( <div> <DynamicHeader title="Home Page"/> <div className="page-content"> <h1>Home Page</h1> <p>Etc....</p> </div> </div> ); }; |
Using this example we can add the same header into every page where actually we need.
Happy coding 🙂
