У меня возникают проблемы при попытке выяснить, как использовать маршрутизатор с более чем одним компонентом Wrapper. Таким образом, мое приложение имеет компонент Wrapper, который выполняет вызов get, проверяет токен и имеет параметр url. Этот URL является ссылкой для получения из моего API. У меня есть файл users.jsx, в котором перечислены пользователи, и файл userdetails.jsx, в котором перечислены детали каждого пользователя. Ключ - это CN. Мой users.jsx уже имеет динамическую ссылку, которая использует имя пользователя (cn) для каждого пользователя в списке. Теперь мое приложение отображает список пользователей в моем файле users.js, используя компонент Wapper и передавая URL для получения списка пользователей. Мне нужно, чтобы здесь были интегрированы userDetails.
users.js
const IndexPage = () => (
<Layout>
<MainComponentWrapper url="http://localhost:5000/user">
<User />
</MainComponentWrapper>
</Layout>
)
Мой другой URL-адрес: http://localhost:5000/user/<cn> для получения подробной информации.
Я пытался прийти с кодом, подобным этому, но это не работает:
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>
)
Я хочу перейти к деталям пользователя, если я нажму на пользователя в списке
Также я использую плагин gatsby:
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [`/user/*`] },
},
```