I have a component called Search that I want to be displayed differently depending on which page is being rendered. On the homepage, I want it to appear at the bottom of the page, but on all other pages, I want it to be at the top.
Currently, my app.js looks like this:
const App = () => {
return (
<BrowserRouter>
<Switch>
<Route path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/work' component={Work} />
<Route path='/contact' component={Contact} />
</Switch>
</BrowserRouter>
)
}
Inside a page component, like Contact for example:
const Contact = () => {
return (
<div>
<Search />
Contact
</div>
)
}
However, this means I have to manually add the Search component to each page component and decide its placement every time.
Is there a way I can modify my app.js like this:
const App = () => {
return (
<BrowserRouter>
<Search />
<Switch>
<Route path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/work' component={Work} />
<Route path='/contact' component={Contact} />
</Switch>
</BrowserRouter>
)
}
And then dynamically style the Search component based on which page is being rendered, so it appears in the correct position.
Thank you!