Динамический маршрут для получения пользовательских данных из моего API

Question

Итак, у меня есть маршрут на моем бэкэнде, который возвращает мне объект Json с данными пользователя, у него есть параметр "cn", который вы должны передать как "localhost / user / cn". В моем интерфейсе у меня уже есть маршрут, который возвращает мне объект json со списком пользователей и отображает его в таблице. Теперь я хочу щелкнуть каждого пользователя и перенаправить на новую страницу, которая отображает информацию о пользователе. Я проверил этот сайт "https://www.gatsbyjs.org/docs/recipes/", но я не смог воспроизвести, так как я довольно новичок в этом. Моя структура проекта:

|-- /frontend   
   |-- /src
      |-- /Components
        |-- /users
           |-- index.js
           |-- users.jsx
        |-- /userDetails
           |-- index.js
           |-- userdetails.jsx
      |-- /pages
        |-- users.js
        |-- userdetails.jsx
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

В папке с моим компонентом у меня есть" users.jsx"У этого есть функция, которая возвращает таблицу, отображающую объект json. В моей папке страниц у меня есть" users.js ", который отображает мне список пользователей. Это работает нормально. Теперь я не могу придумать код, чтобы сделатьподробности для каждого пользователя.

users.jsx

export default function User ({ data })  {
  const classes = useStyles()

  return (

    <div className={classes.root}>
      <h1>Users</h1>
      <Table className={classes.table} size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">User</TableCell>
             <Link to='/details'></Link>
          </TableRow>
        </TableHead>
        <TableBody>
            {data.map(user => (
            <TableRow  key={user.User}>
              <TableCell align="left">{user} </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

users.js

import React from "react"

import Layout from "../components/layout"
import User from "../components/users"
import MainComponentWrapper from "../components/mainComponentWrapper"


const IndexPage = () => (
  <Layout>
    <MainComponentWrapper url="http://localhost:5000/user">
      <User  />
    </MainComponentWrapper>
  </Layout>
)
export default IndexPage

Я извлекаю данные с помощью wapper, у которого есть функция для проверки токена и извлекает данные с URL в качестве параметра, я передаю этоURL здесь, в MainComponentWrapper.

Если я щелкаю пользователя, он должен использовать cn в качестве параметра и получить информацию о пользователе с моим маршрутом, который у меня есть на заднем плане:

@app.route('/user/<cn>', methods=['GET'])
@jwt_required
def user_details(cn):


        user_details = ldap.get_object_details(cn, query_filter="cn=%s")

        if user_details is None:
            response = jsonify(message='User Not Found')
            return response, 404
        return jsonify(user_details)

Какой-нибудь пример кода, как мне это сделать? На веб-сайте gatsby я увидел, что мне нужно создать файл gatsby-node.js для использования страниц create, но я не знаю, относится ли это к моему случаю.

Спасибо за помощь.

Answer 1

Я думаю, что вы ищете маршруты только для клиентов. По сути, это позволяет вам создать «обычную» страницу React, которая также может принимать аргументы через URL, например:

/* gatsby-node.js */

// This is executed at build time. For each page you have in your pages folder,
// it will call this method.
exports.onCreatePage = async ({ page, actions }) => {
    const { createPage } = actions;

    // This will evaluate to true if the page being created is the 'user.js'
    // page.
    if (page.path.match("/user/")) {
        // matchPath will tell the new page to match any path that starts with
        // '/user/', and to pass the remainder of the url to the page element
        // as a prop called 'cn'.
        createPage({...page, matchPath: "/user/:cn"});
    }

};

Я предполагаю сценарий, когда у вас есть страница в папке ваших страниц под названием «пользователь».js ', который вы хотите визуализировать, когда кто-то нажимает на пользователя из вашего списка. На этой странице «user.js» должны отображаться сведения о пользователе, на которого вы нажали. Вы можете установить для ссылки в списке значение «пользователь / все-что-значение-cn-is-for-this-user».

Хук onCreatePage вызывается для каждой страницы, на которой вы находитесьпапка ваших страниц. Таким образом, ваш файл 'user.js' также будет проходить здесь. Когда это происходит, вы используете действие createPage для создания страницы с дополнительным аргументом, переданным в: matchPath, который в этом случае будет соответствовать любому пути, начинающемуся с 'user'. Часть URL 'cn' будет передана в качестве опоры на страницу, поэтому оттуда вы можете вызвать конечную точку API с помощью cn пользователя и отобразить детали пользователя.

Надеюсь, это поможет!