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