title: Browser back or forward buttons cause React app to display raw JSON data, component not loading
body: <p>As title says, when I use the browser back or forward buttons in my React-redux, express.js, postgres app, the raw JSON data for that route is displayed on the page, but the actual React component isn't loading, until I hit refresh.</p>
  <p>Note - this <strong>only</strong> happens when using the back/forward buttons, if I navigate to any route through the links in the App or typing the route in the URL then it loads properly. It's like the back/forward buttons aren't triggering the component to re-render, but still displaying the state (the results from the GET request).</p>
  <p>Also worth noting that it doesn't do this every single time I click back or forward, almost does it randomly or if I click a few times. And again, when <strong>I hit refresh</strong> the component then loads correctly.</p>
  <p>Slice:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const loadAllProducts = createAsyncThunk('products/loadAllProducts', async () =&gt; {
      const response = await fetch('/products');
      const json = await response.json();
  
      return json;
  });
  
  export const productsSlice = createSlice({
      name: 'products',
      initialState: {
          products: [],
          loadProductsStatus: 'idle',
      },
      extraReducers: {
          [loadAllProducts.pending]: (state, action) =&gt; {
              state.loadProductsStatus = 'loading';
          },
          [loadAllProducts.fulfilled]: (state, action) =&gt; {
              state.loadProductsStatus = 'succeeded';
              state.products = action.payload;
          },
          [loadAllProducts.rejected]: (state, action) =&gt; {
              state.loadProductsStatus = 'failed';
          },
      }
  });
  
  export const selectProducts = (state) =&gt; state.products.products;</code></pre>
  </div>
  </div>
  </p>
  <p>Component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Products = () =&gt; {
      const dispatch = useDispatch();
      const allProducts = useSelector(selectProducts);
  
      // load all products from database
      useEffect(() =&gt; {
          dispatch(loadAllProducts());
      }, [dispatch]);
      
      return (
          &lt;div className='page-container'&gt;
              {allProducts.map((product) =&gt; (
                  &lt;Link to={`/products/${product.category_name}/${encodeURIComponent(product.product_name)}`}&gt;
                      &lt;div key={product.product_id}&gt;
                          &lt;p&gt;{product.product_name}&lt;/p&gt;
                          &lt;p&gt;{product.price}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/Link&gt;
              ))}
          &lt;/div&gt;
      );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>App:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const App = () =&gt; {
  
      return (
          &lt;Router&gt;
              &lt;div className='App'&gt;
                  {/* &lt;Nav /&gt; */}
                  &lt;Switch&gt;
                      &lt;Route path='/' exact component={Home} /&gt;
                      &lt;Route path='/register' exact component={Register} /&gt;
                      &lt;Route path='/login' exact component={Login} /&gt;
                      {/* &lt;Route path='/logout' exact component={Logout} /&gt; */}
                      &lt;Route path='/products' exact component={Products} /&gt;
                      &lt;Route path='/products/:category' exact component={Category} /&gt;
                      &lt;Route path='/products/:category/:product' exact component={IndividualProduct} /&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      );
  };</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/IBgXl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IBgXl.png" alt="enter image description here" /></a></p>