React Router Redirects To Homepage On Refreshing Routes With Params

JavaScript
1

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:

history.goBack();

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

 const handleSingle = business => {
    localStorage.setItem("current_business_id", business.id);
    history.push({
      pathname: "/business/?id=" + business.id,
      state: { business: business }
    });

  };

This is my single business page "

useEffect(() => {

    let param = window.location.pathname;
    setshareUrl(param);
    const urlParams = new URLSearchParams(window.location.search);
    const biz_id = urlParams.get("id");
    let bizid = {
      id: biz_id
    };

    axios.post("/getBusinessesByID", bizid).then(response => {
      let businesses = response.data.data[0];
        setData(businesses);      
    });
  }, []);

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}>
      <Switch>
        <Route path="/businesses/:query" component={LinkedBusinessesPage} />
        <Route exact path="/business/:id" component={withRouter(ViewSingleBusinessPage)} />
      
      </Switch>
    </Router>
  );
};

export default App;
2

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