javascript - 使用 react-router 的无效挂钩调用 useSelector()

Question

我在 Redux 中为购物车工作。假设我有两个页面，并且想要将状态从购物页面传递到购物车/结帐页面。

我正在从此页面调用 useSelector，但我收到有关无效 Hook Call 的错误。

const CartPage = () => {
    const selectedProducts = useSelector(
        (state) => (state && state.products) || []
    );
    
    return (
        <PageContainer>
            This is the Cart Page
        </PageContainer>);
};

export default CartPage;

而这个组件是这样由 react-dom-router 渲染的

<AppContainer>
  <Navigation />
    <Switch>
      <Route exact path="/" render={WelcomePage} />
      <Route path="/cart" render={CartPage} />
      <Route path="/shopping" render={ShoppingPage} />
    </Switch>
</AppContainer>

我从页面组件 ShoppingPage 中的组件存储状态。

useSelector 钩子仅在 react-router-dom 之外的组件内部工作。有没有办法获得这些组件之一的状态？

标签： javascriptreact-reduxreact-router-dom

Answer 1

编辑：不知何故，它在 Route 的 render 属性中使用回调来工作

这里是固定代码

<AppContainer>
  <Navigation />
    <Switch>
      <Route exact path="/" render={() => <WelcomePage /> } />
      <Route path="/cart" render={() => <CartPage /> } />
      <Route path="/shopping" render={() => <ShoppingPage /> } />
    </Switch>
</AppContainer>