Question

我在尝试弄清楚如何将路由器与一个以上的包装组件一起使用时遇到问题。因此，我的应用程序具有包装程序组件，该组件可以进行get调用以验证令牌并具有url参数。该网址是从我的api中获取的链接。我有一个列出用户的users.jsx文件和一个列出每个用户详细信息的userdetails.jsx文件。关键是CN。我的users.jsx已经有一个动态链接，该链接为列表中的每个用户使用用户名（cn）。现在，我的应用程序使用Wapper组件将我的用户列表呈现在我的users.js文件中，并将URL传递给fetch以获取用户列表。我需要的是在这里集成userDetails。

"content_scripts": [
    {
      "js": ["main.js"],
      "matches": ["https://intra.epitech.eu/*"],
      "run_at": "document_end"
    }
  ]

我的另一个网址是：users.js const IndexPage = () => ( <Layout> <MainComponentWrapper url="http://localhost:5000/user"> <User /> </MainComponentWrapper> </Layout> )以获取详细信息。

我试图提供这样的代码，但是它不起作用：

http://localhost:5000/user/<cn>

如果我单击列表中的用户，我想导航到用户详细信息

我也在使用gatsby插件：

const IndexPage = () => (
  <Layout>
    <Router>
        <div>
            <MainComponentWrapper url="http://localhost:5000/user">
                <User path="/users"  />
            </MainComponentWrapper>
    </div>
    <div>
            <MainComponentWrapper url="http://localhost:5000/user/<cn>">
                <UserDetails path="/users/:cn" />
            </MainComponentWrapper>
    </div>
    </Router>
  </Layout>

)

Answer 1

请参考此react-router-exact，阅读第一个答案，然后阅读第二个答案，您需要对React路由器中的确切概念（答案1中所述）有所了解，然后必须将其与交换机结合使用（在答案二）中声明。

如何将路由器与2个不同组件一起使用？

1 个答案: