I am looking to customize the PostAd.js page by displaying only the logo and hiding the location bar, search bar, and sell button. I have included my code below for reference. As a newcomer learning React.js, I am striving to showcase just the logo on the PostAd.js page.
Refer to the image below:
Header.js
import React, { Component } from 'react';
import { Link } from "react-router-dom";
function Logo() {
return (
<a className="navbar-brand logo" href="#">
<img src={require("../ui/logo.png")} />
</a>
);
}
function SearchAndLocation(props) {
return (
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav flex-2 pr-3">
<li className="input-group input-group-lg location mr-4 flex-1">
<div className="input-group-btn">
<button className="fas fa-search search-ico"></button>
</div>
<input type="text" className="form-control" placeholder="Pakistan" />
<div className="input-group-btn">
<button className="fas fa-chevron-down ico"></button>
</div>
</li>
<li className="input-group input-group-lg search flex-2">
<input type="text" className="form-control" placeholder="Find Mobile, Car ,laptop" />
<div className="input-group-btn">
<button className="fas fa-search ico"></button>
</div>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<h6 className="mr-sm-2 login" >Login</h6>
<button className="my-2 my-sm-0 fas fa-plus sell"> <Link to={"/postad"}>SELL</Link></button>
</form>
</div>
);
}
function Header() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Logo />
<SearchAndLocation />
</nav>
);
}
export {
Header,
Logo,
SearchAndLocation
};
PostAd.js
import React, { Component } from 'react';
import { Header } from "../components/Header";
function PostAd() {
return (
<Header></Header>
);
}
export default PostAd;
router.js
import React, { Component } from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
import PostAd from "../components/PostAd";
class AppRouter extends Component {
render() {
return (
<div>
<Router>
<Route exact path='/postad' component={PostAd} />
</Router>
</div>
);
}
}
export default AppRouter;