React Router Redirects To Homepage On Refreshing Routes With Params

I have a react app, where i am using redux to store my user and other api responses. I am having a challenge where when a user refreshes a page with params eg http://localhost:3000/business/?id=e9fb6b9a50e5966e43469b3afee340c91610374661074 they get redirected to the homepage but the link remains exactly the same. I using “react-router-dom”: “^5.2.0”,
. Any advise on how i can refresh the page and still retain the content on my page will be appreciated.

I have tried these solutions but it didn’t work:


My code looks like this
This is where the data is pushed from all businesses to a single business page :

 const handleSingle = business => {
      pathname: "/business/?id=" +,
      state: { business: business }


This is my single business page "

useEffect(() => {

    let param = window.location.pathname;
    const urlParams = new URLSearchParams(;
    const biz_id = urlParams.get("id");
    let bizid = {
      id: biz_id
    };"/getBusinessesByID", bizid).then(response => {
      let businesses =[0];
  }, []);

This is my app.js

import React, { useEffect } from "react";
import history from './helpers/history.js'
import { Router, Route, Switch } from "react-router-dom";
import { withRouter} from 'react-router';

import LinkedBusinessesPage from "views/BusinessesPage/LinkedBusinessPage.js";
import ViewSingleBusinessPage from "views/ViewSingleBusinessPage/ViewSingleBusinessPage";

const App = () => {

  useEffect(() => {
    history.listen(location => {
      dispatch(clearMessage()); //clear message when changing location
  }, [dispatch]);

  return (
    <Router history={history}>
        <Route path="/businesses/:query" component={LinkedBusinessesPage} />
        <Route exact path="/business/:id" component={withRouter(ViewSingleBusinessPage)} />

export default App;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.