带有react路由器的钩子调用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路由器呈现的

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

我将状态存储在页面组件ShoppingPage中的一个组件中。

useSelector挂钩仅在react路由器dom之外的组件内部工作。有没有办法在其中一个组件中获取状态？

Answer 1

EDIT：不知怎么的，它在Route 的render属性中使用了回调

这里的固定代码

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