State is lost while navigating manually in a react redux application

Question

Quick background - I have a React Redux application created using CRA CLI. There are 2 pages or routes set up in my App.js using BrowserRouter and Route of react-router-dom. One is /products which displays all products. Second is /product-details which shows details of a product.

Problem 1 - When I come to the products page, the redux state has all the products information. When I manually navigate to the url /product-details, the redux state with all the product information is lost. Why is this happening?

Problem 2 - Other than manual navigation, How do I programmatically navigate from /products to /product-details page without losing the redux state?

I have tried using the BrowserHistory as suggested in other SO answers. But that does not seem to work for both my above problems.

<Router>
    <div>
      <Route path="/" exact component={Products} />
      <Route path="/product-details" component={ProductDetails} />
    </div>
</Router>

Expected

When I manually navigate to product-details from the address bar, the state from /products page should be available
Should be able to programmatically navigate to the /product-details page and the state available.

TigerDev · Accepted Answer · 2019-06-08 07:34:44Z

3

1) Where did you get data from the server? maybe products page? If so, you can't preserve the data when you manually navigate to the detail page. In your case, in detail page, you should send a request to the server with the product ID to get product detail information. Then it will work for sure.

2) The Route for details page should look like this. <Route path="/product-details/:id" component={ProductDetails} /> And you can go to detail page like this. this.props.history.push('/product-details/1'); It will work for sure.

answered Jun 8, 2019 at 7:34

TigerDev

461 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

katbot9000 · Accepted Answer · 2019-06-08 07:36:35Z

3

It sounds like the way you're navigating is causing the new page to be fetched from the server. For example, if you change the URL manually in the address bar or set the URL with the browser's location API, that will trigger a page load. The way to navigate without triggering a new page load is by using react-router's history API from within your component like this:

this.props.history.push('/product-details');

answered Jun 8, 2019 at 7:36

katbot9000

961 bronze badge

Comments

kiranvj · Accepted Answer · 2019-06-08 08:17:37Z

You should use <Link> to navigate between page when you use router. Otherwise the page will be refreshed and your redux store will be reset. If you enter the url directly in browser and navigate to product-detail page it will not work.

<Link to="/product-details" />

1) When I manually navigate to product-details from the address bar, The state from /products page should be available

You need to fetch the product details again in this case. But you need product id for this. You can use the route /product-details/:id for this. Get the id in your product-details component and using fetch get the product details

2) Should be able to programmatically navigate to the /product-details page and the state available.

For mouse click use <Link>. For programatically use <Redirect>

Awais Rehman · Accepted Answer · 2024-08-26 12:00:23Z

0

I was struggling with the same issue but then i felt that the <a> anchor tag in pure html re-render my whole page which is the reason of losing all my states so tried <Link> tag of react-router-dom and it worked for me.

<Link to="/cart">Cart {cartProducts.length}</Link>

answered Aug 26, 2024 at 12:00

Awais Rehman

1

Collectives™ on Stack Overflow

State is lost while navigating manually in a react redux application

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related