React Route render different banner image for each route - reactjs

Question

This is my Layout page where the routing is performed:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Header from './Header';
import Footer from './Footer';
import Banner from './Banner';
import Home from './Home';
import About from './About';
import Services from './Services';
import Book from './Book';
function Layout() {
return(
<Router>
<Header/>
<Banner/>
<Route exact path="/" component={Home}/>
<Route exact path="/Home" component={Home}/>
<Route exact path="/About" component={About}/>
<Route exact path="/Services" component={Services}/>
<Route exact path="/Book" component={Book}/>
<Footer/>
</Router>
)
}
export default Layout;
This is the Banner component:
import React from 'react';
import Jumbotron from 'react-bootstrap/Jumbotron';
function Banner(props) {
const heroStyle = {
backgroundImage: "url(" + require('../images/home-hero-image.jpg') + ")"
};
return (
<div>
<Jumbotron style={heroStyle}>
<h1 className="centerme">Live your best life</h1>
<p className="centerme">
Get Coaching
</p>
</Jumbotron>
</div>
);
}
export default Banner;
Basically I have a different banner image for Home, About and Services and want to update the image url depending on the page that is currently in use.
I'm not sure what the best practice way to achieve this would be.

Answer 1

You should be able to render the Banner after adding the router props to it, and then access location.pathname inside Banner.
Note withRouter and BannerWithRouter component:
import React from 'react'
import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom'
import Header from './Header'
import Footer from './Footer'
import Banner from './Banner'
import Home from './Home'
import About from './About'
import Services from './Services'
import Book from './Book'
const BannerWithRouter = withRouter(({ location }) => <Banner {...props} />)
function Layout() {
return (
<Router>
<Header />
<BannerWithRouter />
<Route exact path='/' component={Home} />
<Route exact path='/Home' component={Home} />
<Route exact path='/About' component={About} />
<Route exact path='/Services' component={Services} />
<Route exact path='/Book' component={Book} />
<Footer />
</Router>
)
}
export default Layout
Banner component: (Note you now have a prop called location)
import React from 'react'
import Jumbotron from 'react-bootstrap/Jumbotron'
function Banner({ location }) {
const heroStyle = {
backgroundImage: 'url(' + require('../images/home-hero-image.jpg') + ')'
}
console.log(location.pathname)
if (location.pathname === '/about') {
return 'This is the about page'
}
return (
<div>
<Jumbotron style={heroStyle}>
<h1 className='centerme'>Live your best life</h1>
<p className='centerme'>
<a href='#' className='jumbotron-book-now-button'>
Get Coaching
</a>
</p>
</Jumbotron>
</div>
)
}
export default Banner