How to render different message based on current url / url fragment

You can use react-router-dom history to know about the changes in the URL. Here is an example:

import React from "react";
import { useHistory } from "react-router-dom";

const App = () => {
  const history = useHistory();

  return (<>
     { history.location.pathname === "/" ? <div>Home</div> : <div>Other Component</div> }

You are passing the browserHistory to the Router. Why don't you pass the same to the Snackbar component? There will be url and location in the history object, These can be made use inside the Snackbar and render the message as you need. For example:


import React from "react";

const App = () => (
      {inProduction ? null : <CP.Dev/>}
        {...p as any}
      <Router history={browserHistory}>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />


const SnackBar = ({history, ...props}) => {
// const message = `Current location is ${history.location.url}`;
// Format and use the message as needed
 return (

PS: If you want to access the location inside any subcomponent of Router, I recommend using useLocation hook. But in this case the Snackbar is a sibling and react-router context won't be set to use the router hooks.