Pass props to React component dependent on route - reactjs

Question

I have a root component which uses react-router:
<HashRouter>
<aside>
<Sidebar />
</aside>
<main>
<Switch>
{/* -- routes go here -- */}
</Switch>
</main>
</HashRouter>
I want my Sidebar component to have different content depending on which route we're on. So if I have two routes, foo and bar, when I go to /foo I want Sidebar to have different props than when I visit /bar. I've tried passing the location as a prop:
<Sidebar location={this.context.router.location.pathname} />
But I'm pretty sure that's not how it works... And sure enough it didn't work.

Answer 1

You can use withRouter to pass values from route to another component. This way you can do conditional rendering or implement any other logic related to the current route to your component.
You can get access to the history object’s properties and the closest
's match via the withRouter higher-order component. withRouter
will re-render its component every time the route changes with the
same props as render props: { match, location, history }.
Example (from official documentation)
// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
render() {
const { match, location, history } = this.props
return (
<div>You are now at {location.pathname}</div>
)
}
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

Answer 2

Here's a method using React Router's withRouter to 'connect' the <Sidebar /> component to the router.
With withRouter we create our <Sidebar /> component as normal, then 'connect' it like this:
//Sidebar
class Sidebar extends React.Component {
render() {
const { location } = this.props;
return (
<div>
<h1>Sidebar</h1>
<p>You are now at {this.props.location.pathname}</p>
</div>
)
}
}
const SidebarWithRouter = withRouter(Sidebar);
In the end we have a new <SidebarWithRouter /> component connected to the router so it has access to match, location, and history.
Unfortunately the code snippet won't work in Stackoverflow due to the history within the iframe, but here's the code, and a working Codepen.
let { BrowserRouter, Link, Route } = ReactRouterDOM;
let { Switch, withRouter } = ReactRouter;
let Router = BrowserRouter;
// App
class App extends React.Component {
render() {
return (
<Router>
<div className="container">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
<aside>
<SidebarWithRouter />
</aside>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</Router>
);
}
}
//Home
const Home = () => (
<div>
<h1>Home</h1>
<p>This is the Home Page.</p>
</div>
);
//About
const About = () => (
<div>
<h1>About</h1>
<p>This is about</p>
</div>
);
//Sidebar
class Sidebar extends React.Component {
render() {
const { location } = this.props;
return (
<div>
<h1>Sidebar</h1>
<p>You are now at {this.props.location.pathname}</p>
</div>
)
}
}
const SidebarWithRouter = withRouter(Sidebar);
ReactDOM.render(<App />, document.getElementById("app"));