React Router：通过浏览器地址栏导航到路由时状态为空答案

【问题标题】：React Router: State empty when navigating to route via the browser address barReact Router：通过浏览器地址栏导航到路由时状态为空
【发布时间】：2021-08-06 15:57:30
【问题描述】：

我创建了一个 Modal，它是我的路由器配置的一部分：

  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>

我注意到当通过浏览器导航到路由http://localhost:3001/product/3时，传播模态模板的产品数组是空的，所以我添加了以下内容：

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

我该如何解决这个问题？

任何帮助将不胜感激！

更新：

我更新了<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>

所以现在当通过浏览器栏进入路线时，div Nothing 被渲染。

我知道为什么！我拥有模板的方式是通过 ProductListing 页面中的点击进行传播：

  <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>

地址栏不会渲染任何内容，因为handleGetProductModalTemplate 永远不会触发！！！那么我的朋友们，处理这个问题的最佳方法是什么？我确信方法是 React-Router。就像这条路线被击中一样......

【问题讨论】：

标签： reactjs react-router use-state

【解决方案1】：

我猜问题是由于您在 Route 标记的参数中传递的确切参数。

【讨论】：

但这不是我应该拥有的吗？你的意思是<Route exact path="/product/:id">
我删除了它。 <Route path="/product/:id"> 没用。但感谢您的洞察力。
那么，在控制台上你得到了什么？

【解决方案2】：

能否请您发布您对handleGetProductModalTemplate() 的实现。在我的应用程序中处理这个位置的方法是使用 React-Router 中的 useHistory() 挂钩来触发路由更改。

我建议您从 <LinkButton> 组件中删除 to={/product/${id}} 属性，而是将 id 值传递给 handleGetProductModalTemplate() 函数。

在handleGetProductModalTemplate() 中执行您需要的逻辑，然后在最后触发路由更改。

让历史 = useHistory()

在最后的handleGetProductModalTemplate()里面有这个

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

这样可以确保在触发路由更改之前调用handleGetProductModalTemplate()

【讨论】：