javascript - 与 React hooks 一起使用时，React router 无法正常工作？

Question

我正在开发一个 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>)
 }

AdminShop 组件

const AdminShop = ({ component: Component, ...rest }) => {
return (
    <Route {...rest} render={(props) => (
        true
            ? <Component {...props} />
            : null
    )} />

)
}

最后是产品组件

const Products = (props) => {
     useEffect(() => props.getProducts(), [])
     const { products, loading } = props
     return ( ... )
}

export default connect(mapStateToProps, { getProducts })(Products)

除了这些工作之外，其他组件中存在的链接也可以工作，即网址发生更改，但一旦每个路由的网址发生更改，页面就会显示为空白。如果我随后刷新页面，它会呈现良好但仅在刷新时呈现。另外，如果我省略渲染产品组件的路由，所有其他路由都可以正常工作。在使用 react 路由器时是否有其他使用钩子(Hook)的方法，因为它与产品组件有关。任何帮助将不胜感激。

这是我渲染产品页面时收到的警告

Answer 1

不带 {} 的箭头函数将返回其单个语句的值。

带有 {} 的箭头函数需要显式 return 语句才能返回值。

因此 props.getProducts() 的结果正在从您的效果中返回。

但是，useEffect() 将返回值限制为仅是该效果的清理函数。非函数返回值被 React 视为错误。

要解决此问题，只需将 {} 添加到您的箭头函数，这样它就不会返回值:

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