Javascript 当与React挂钩一起使用时，React路由器不能正常工作？

我正在开发一个react应用程序，其中我有3个组件：AdminShopRoutes、AdminShop和Products

AdminShopRoutes组件：

const AdminShopRoutes = () => {
    return (
        <Router>
            <Header>
                <AdminShop exact path='/admin/shop' component={Dashboard} />
                <AdminShop exact path='/admin/shop/customers' component={Customers} />
                <AdminShop exact path='/admin/shop/products' component={Products} />
            </Header>
    </Router>)
 }

这些工作之外的其他组件中存在的链接，即url已更改，但一旦每个路由的url更改，页面即为空白。如果我随后刷新页面，它会很好地呈现，但仅在刷新时呈现。此外，如果我省略渲染产品组件的路由，则所有其他路由都可以正常工作。在使用react路由器时，是否有其他使用钩子的方法，因为它与产品组件有关。任何帮助都将不胜感激

这是我在呈现产品页面时收到的警告

---

您的错误表明这与路由无关，但您的useEffect返回了一些不应该返回的内容

---

错误非常详细和清楚。

您的错误表明这与路由无关，但您的useEffect返回了一些不应该返回的内容

错误非常详细和清楚。

请执行此操作

useEffect(() => {
  props.getProducts()
}, [])

这样就不会返回

props.getProducts（）

执行此操作

useEffect(() => {
  props.getProducts()
}, [])

---

因此，

props.getProducts（）

不会返回没有

{}

的箭头函数将返回其一条语句的值

带有

{}

的箭头函数需要显式的

return

语句来返回值

因此，

props.getProducts（）

的结果将从您的效果中返回

但是，

useffect（）

将返回值限制为该效果的清除函数。React将非函数返回值视为错误

要解决此问题，只需将

{}

添加到arrow函数中，使其不会返回值：

useEffect(() => {
  props.getProducts()
}, [])

---

不带

{}

的箭头函数将返回其一条语句的值

带有

{}

的箭头函数需要显式的

return

语句来返回值

因此，

props.getProducts（）

的结果将从您的效果中返回

但是，

useffect（）

将返回值限制为该效果的清除函数。React将非函数返回值视为错误

要解决此问题，只需将

{}

添加到arrow函数中，使其不会返回值：

useEffect(() => {
  props.getProducts()
}, [])

---

尝试将路由包装在

开关中

并从所有路径中删除exact，除非第一个路径仍然不起作用。它与redux的connect关键字有关，这就是我现在发现的。因为如果我在主页和客户页面之间切换，它工作得很好，只要我转到产品页面，然后再转到客户或主页，它就会呈现一个银行页面，您看到任何错误吗？您获取了提取的数据吗？是的，这是一个警告，我修改了问题并添加了错误快照，是的，我确实获取了提取的数据，但与此警告一起，将路由包装在

开关中，并从所有exept the first中删除exact。它仍然不起作用。它与redux的connect关键字有关，这就是我现在发现的。因为如果我在主页和客户页面之间切换，它工作得很好，只要我转到产品页面，然后再转到客户或主页，它就会呈现一个银行页面，您看到任何错误吗？您获取了提取的数据吗？是的，这是一个警告，我修改了问题并添加了错误。是的，我确实获取了提取的数据，但同时还有此警告