I understand that due to some React Router logic, a forward slash is appended onto the url on refresh.

Some context, I am displaying a page that renders some company info based on the company at the end of the url. Since I split and extract the companies via "/", my page loads perfectly with or without the last slash.

The problem now is that if I ever refresh the page, and it appends a trailing forward slash, when I change the company, it messes up.

Example:

Original URL: https://www.payranked.com/companies/bytedance

Refreshed URL: https://www.payranked.com/companies/bytedance/

If I were to navigate to another page:

Without trailing slash: https://www.payranked.com/companies/accenture

With trailing slash: https://www.payranked.com/companies/bytedance/accenture

As seen, if there is a page refresh, then my URL gets messed up.

Here is my current code:

const history = useHistory();

// Some code...

// Used to extract company string, then uses MySQL call to display info
const location = useLocation();
const companyURL = location.pathname.split('/')[2];

// companyDropdown is the key returned from selecting a company in the dropdown.
let companyDropdownURL = CompanyNameToURL[companyDropdown]; 

history.push({
  pathname:  `${companyDropdownURL}`,
    state: {
      response: '' 
    } 
});

companyDropdownURL is essentially a value from a map CompanyNameToURL. I.e. if I was searching JPMorgan Chase (companyDropdown), companyDropdownURL would be jpmorgan-chase, which is reflected in the URL.

How would I feasible approach this issue, either by editing the history somehow or by another method. Thanks!

Edit: Added more information