React Router: State empty when navigating to route via the browser address bar

Question

I have created a Modal which is part of my Router configuration:

  return (
    <AppContext.Provider value={appContextValue}>
      <ProductLanding getProductModalTemplate={getProductModalTemplate} />
      <Switch location={isModal ? previousLocation : location}>
        <Route path="/cart">
          <Cart />
        </Route>
        <Route exact path="/product/:id">
          <Modal
            modalTemplate={
              productModalTemplate != null ? productModalTemplate : null
            }
            isModal={isModal}
          />
        </Route>
      </Switch>
      {isModal ? (
        <Route exact path="/product/:id">
          <Modal
            modalTemplate={
              productModalTemplate != null ? productModalTemplate : null
            }
            isModal={isModal}
          />
        </Route>
      ) : null}
    </AppContext.Provider>

I noticed when navigating via the browser to get to the route http://localhost:3001/product/3 the products array which is propagating Modal template is empty, so I added the following:

  if (!products.length) {
    console.log('products ', products);
     return null
  }

How can I fix this?

Any help would be appreciated!

Update:

I updated the <Switch/>

 <Switch location={isModal ? previousLocation : location}>
    <Route path="/cart">
      <Cart />
    </Route>
    <Route exact path="/product/:id">
      <Modal
        modalTemplate={
          productModalTemplate != null ? (
            productModalTemplate
          ) : (
            <div>Nothing</div>
          )
        }
        isModal={isModal}
      />
    </Route>
  </Switch>

So now when going to the route via the browser bar, the div Nothing gets rendered.

I know why! The way I have it the template is being propagated by the clicks in the ProductListing page:

  <div className={productClasses}>
        <LinkButton
          to={`/product/${id}`}
          onClick={() =>
            handleGetProductModalTemplate(<ProductModalTemplate />)
          }
        >
          <img className={styles.image} src={imageSrc} alt={title} />
        </LinkButton>
        <div className={styles.details}>
          <div className={styles.text}>
            <LinkButton
              to={`/product/${id}`}
              onClick={() =>
                handleGetProductModalTemplate(<ProductModalTemplate />)
              }
            >
              <h2 className={styles.title}>{title}</h2>{' '}
            </LinkButton>

            <span className={styles.price}>${finalPrice}</span>
          </div>

Nothing get rendered via the address bar because handleGetProductModalTemplate never fires!!! So my friends what would be the best way to handle this? I am sure the way would be React-Router. Like if this route is hit do this...

Sanskar Bansal · Accepted Answer · 2021-08-06 16:09:19Z

1

I guess the problem is due to exact parameter which you have passed in params of Route tag.

answered Aug 6, 2021 at 16:09

Sanskar Bansal

1889 bronze badges

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

3 Comments

Antonio Pavicevac-Ortiz Over a year ago

But isn't that what I should have? You mean <Route exact path="/product/:id">

Antonio Pavicevac-Ortiz Over a year ago

I removed it. <Route path="/product/:id"> Didn't work. But thanks for your insight.

Sanskar Bansal Over a year ago

So, on console what you are getting ?

Naveen Venkatesh · Accepted Answer · 2021-08-06 17:02:01Z

0

Can you please post your implementation of handleGetProductModalTemplate(). The way I would approach this sitation in my applications is I would use the useHistory() hook from React-Router to trigger the route change.

I would suggest you remove the to={/product/${id}} prop from the <LinkButton> component and instead pass the id value to the handleGetProductModalTemplate() function.

Perform your required logic inside handleGetProductModalTemplate() and then at the end trigger the route change.

let history = useHistory()

inside the handleGetProductModalTemplate() at the very end have this

history.push(`/product/${id}`)

This way you can ensure that handleGetProductModalTemplate() is being called before triggering the route change

edited Aug 6, 2021 at 17:02

answered Aug 6, 2021 at 16:22

Naveen Venkatesh

2012 silver badges5 bronze badges

Collectives™ on Stack Overflow

React Router: State empty when navigating to route via the browser address bar

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related