How to add new parameters to url without refreshing page in react? - reactjs

Question

I work in react and I have a shop page that have some filters. When I apply a filter, I want to also add this filter into the url but without reloading page.
I mean like this :
currentUrl : something.com
newUrl : something.com/brand-nike
I want to change url without refresh.
I already tried these codes but both reload page :
window.history.pushState({ path: url }, "", url);
window.history.replaceState(null, "", url);
And also I am using react-router-dom for routing.
This is my App.js :
return (
<ToastProvider>
<ShopFilterContext.Provider value={shopFilterHook}>
<CartContext.Provider value={cartHook}>
<React.Fragment>
<Router basename={BASENAME}>{renderRoutes(routes)}</Router>
</React.Fragment>
</CartContext.Provider>
</ShopFilterContext.Provider>
</ToastProvider>
);
This is renderRoutes function :
export const renderRoutes = (routes = []) => {
return (
<Suspense fallback={<Loader />}>
<Switch>
{routes.map((route, i) => {
const Guard = route.guard || Fragment;
const Layout = route.layout || Fragment;
const Component = route.component;
return (
<Route
key={i}
path={route.path}
exact={route.exact}
render={(props) => {
props["layoutObj"] = route.layoutObj;
return (
<Guard>
<Layout>{route.routes ? renderRoutes(route.routes) : <Component {...props} />}</Layout>
</Guard>
);
}}
/>
);
})}
</Switch>
</Suspense>
);
};
And this is routes variable
const routes = [
{
path: "/account/*",
layout: NifsyLayout,
routes: [
{
exact: true,
path: "/account/*",
component: lazy(() => import("./pages/MyAccount")),
},
{
path: "/account/*",
exact: true,
component: () => <Redirect to={ACCOUNT_URL} />,
},
],
},
{
path: "/search/*",
layout: NifsyLayout,
routes: [
{
exact: true,
path: "/search/*",
component: lazy(() => import("./pages/Shop")),
},
{
path: "/search/*",
exact: true,
component: () => <Redirect to={ACCOUNT_URL} />,
},
],
},
{
path: "*",
layout: NifsyLayout,
routes: [
{
exact: true,
path: "/not-found",
component: lazy(() => import("./pages/NotFound")),
},
{
path: "*",
exact: true,
component: () => <Redirect to={BASE_URL} />,
},
],
},
];
And this is for navigation : (history is hook from useHistory)
let url = "/search";
if (filter.category) url = url + "/" + filter.category;
if (filter.brands) {
for (let i = 0; i < filter.brands.length; i++) {
url = url + filter.brands[i];
}
}
if (filter.collections) {
for (let i = 0; i < filter.collections.length; i++) {
url = url + filter.collections[i];
}
}
url = url + "?q=" + filter.keyword;
url = url + "&start=" + filter.start;
url = url + "&size=" + filter.size;
url = url + "&sortby=" + filter.sort;
url = url + "&filter=" + (typeof filter.filters == "string" ? filter.filters : JSON.stringify(filter.filters));
// multi refresh
//window.history.pushState({ path: url }, "", url);
//window.history.replaceState(null, "Nifsy", url);
history.push(url);

Answer 1

It might be late to answer but I searched a lot and tried various alternatives. Finally what worked for me :
window.history.replaceState("", "",/new_path);

Answer 2

Assuming you're using functional components and the react router, from react-router-dom you can import the hook useHistory.
const history = useHistory();
history.push("/your/path");
// or
history.replace("/your/path");

Answer 3

To not reloading you have to design your Route and define your path here . this will help you to get the page without loading .