Reactjs url更改时组件未重新呈现

路由器的配置如下所示

App.js

<Router>
  <Switch>
    <Route exact path="/" render={() => <Home />} />
    <Route exact path="/products/:productId" component={ ProductDetail } />
    <Redirect to="/" />
  </Switch>
</Router>

export const ProductDetail = ({ match }) => {
  const productId = match.params.productId;
    useEffect(() => {
        dispatch(fetchProductById(productId));
  }, [productId, dispatch]);

const product = useSelector((state) => selectProductById(state, productId));
return(<.....>)
}

现在，当我从
Home
导航到
ProductDetail
时，一切正常。但是如果我尝试点击url
http://localhost:3000/products/someId
组件不会直接渲染，也不会调用
useffect
hook

我已经阅读了
路由器
文档，它说

使用组件（而不是下面的渲染或子组件）时，路由器使用React.createElement从给定组件创建新的React元素

这是否意味着新创建的组件（
ProductDetail
在我的例子中）应该呈现并调用钩子？
我是
React
新手，因此我可能遗漏了一些非常简单的内容。
如评论中所述，当直接导航到
ProductDetail
组件时，产品还不会在商店中。
useffect
钩子启动产品的加载，但在加载完成之前，
product
将是未定义的（或null，或其他取决于您的减速机）。你需要单独处理这个案子

处理它最简单的方法是呈现某种类型的加载指示器，例如

export const ProductDetail = ({ match }) => {
  const productId = match.params.productId;
    useEffect(() => {
        dispatch(fetchProductById(productId));
  }, [productId, dispatch]);

  const product = useSelector((state) => selectProductById(state, productId));

  if (!product) {
    return <p>Loading...</p>
  }

  return(<.....>)
}

export const ProductDetail=（{match}）=>{
const productId=match.params.productId；
useffect（（）=>{
调度（fetchProductById（productId））；
}，[productId，dispatch]）；
const product=useSelector（（state）=>selectProductById（state，productId））；
如果（！产品）{
返回加载

}
返回（）
}

此外，正如注释中提到的，当组件渲染时，通常会触发钩子。组件不会等待
useffect
钩子启动的操作完成。发件人：

传递给
useffect
的函数将在渲染提交到屏幕后运行

Home
组件是否初始化了
ProductDetail
所依赖的某种状态？“组件不呈现”是指它呈现
Home
组件还是根本不呈现任何内容？是的，
Home
组件还具有
useffect（async func…
），并预取主页上的产品。现在
ProductDetail
只是显示单个产品的详细信息。所谓“组件不呈现”，我的意思是如果我用
productId
直接点击url，ProductDetails组件就会中断，你说的“中断”是什么意思？是否有错误？错误显示
无法读取未定义的
的属性标题，这意味着未获取产品，而该产品正试图呈现
产品。当组件呈现时，会触发标题
挂钩。组件不会等待操作的结果。