使用 react-router-dom 未定义道具

Question

我正在尝试做的事情：我的主要组件是来自用户的帖子的提要，我想要做的是能够单击一个帖子上的按钮以路由到新的帖子仅显示该帖子及其所有回复的组件。就像 Reddit 一样。我的问题是，当我单击该按钮时，确实会路由到新组件，但我所有的道具都未定义，我无法弄清楚我做错了什么。

所以我的流程是：

布局（带路由器/交换机）--> FeedIndex（带交换机）--> ViewPost

我有一个布局功能组件，它使用路由器、交换机和链接来使用反应路由器 dom。我所有的路线都有效，除了一条。我的开关里面是我的主要组件“/”，它是 FeedIndex。在我的主要组件中，我需要路由到另一个组件。所以布局组件有这个：

<Router>
  <Switch>
    <Route exact path="/">
      <FeedIndex
      token={token}
      firstName={firstName}
      userId={userId}
      />
    </Route>
                    
    <Route path="/post" component={ViewPost} />
  </Switch>
</Router>

然后在 FeedIndex 中，我有一个指向“/post”的链接，然后是另一个 Switch 和 Route，如下所示：

<Switch>
  <Route exact path="/post">
    <ViewPost
    post={post}
    index={index}
    token={token}
    key={index}
    addReply={addReply}
    createReply={createReply}
    replyOn={replyOn}
    replyOff={replyOff}
    getPosts={getPosts}
    replyActive={replyActive}
    />
  </Route>
</Switch>

有什么想法吗？如果需要，我可以发布整个组件的代码。

Answer 1

您可以使用 react-context 或 react-redux 在整个应用程序的组件之间共享价值。

Answer 2

为了处理状态，你可以使用 react 上下文提供者：https://reactjs.org/docs/context.html 或 react redux https://react-redux.js.org/。

根据您有多少个州以及您想对它们做什么，您可以选择两者之一。 React-redux 只加载你需要的状态，它更快，但它有一个你需要遵循的特定结构。一开始比较复杂，但可以更轻松地处理多种状态。

上下文提供程序已经与 react 一起安装，它更容易设置，但速度较慢，因为它会在每次页面加载时加载所有状态。