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

【问题标题】：Invalid Hook Call useSelector() with react-router使用 react-router 的无效挂钩调用 useSelector()
【发布时间】：2021-07-07 12:32:34
【问题描述】：

我在 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 之外的组件内部工作。有没有办法获取其中一个组件的状态？

【问题讨论】：

你可以使用一个通用的上下文提供者在你的组件之间共享一些变量。 reactjs.org/docs/context.html#gatsby-focus-wrapper
你能粘贴整个无效的钩子调用吗？因为我的设置和你一样，没有出现任何错误。

标签： javascript react-redux react-router-dom

【解决方案1】：

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

这里是固定代码

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

【讨论】：