Не знаю, как заставить мой бэкэнд-API работать на реагировать

Question

Я создаю приложение Гэтсби с колбой. У меня есть маршрут на моем бэкэнде, который возвращает мне словарь информации о пользователе, но у этого маршрута есть параметр, вам нужно передать uid пользователя, чтобы получить нужный список. На данный момент работает, я могу вернуть списки разных пользователей, меняющих UID. Теперь я хочу создать интерфейс реакции с этим маршрутом, я пытался, но у меня нет ни малейшего понятия, что я делаю.

Backind API-код (эта функция возвращает мне список в зависимости от того, какой идентификатор я вставляю вthe route):

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

    user = ldap.get_object_details(uid)
    return jsonify(user)

возвращенный словарь:

 {
  "cn": [
    "Turanga Leela"
  ], 
  "description": [
    "Mutant"
  ], 
  "employeeType": [
    "Captain", 
    "Pilot"
  ], 
  "mail": [
    "leela@planetexpress.com"
  ], 
  "ou": [
    "Delivering Crew"
  ], 
  "sn": [
    "Turanga"
  ], 
  "uid": [
    "leela"
  ]
}

Итак, у меня уже есть страница, на которой отображаются пользователи, которые у меня есть. Я хочу щелкнуть по имени в этом списке и перейти на страницу, где я отображаю только эту информацию пользователя, используя мой новый маршрут.

это код из списка интерфейсных пользователей (отображаетсписок пользователей):

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>
              <TableCell align="left">{user} </TableCell>

            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

Я также создал новую страницу userdetails.jsx для получения данных о моем пользователе, но не могу отобразить ее:

userdetails.jsx

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

  return (

     <div className={classes.root} >
       <h1>User Details</h1>
       <Table className={classes.table} size="small">
         <TableHead>
           <TableRow>
             <TableCell align="left">cn</TableCell>
             <TableCell align="left">description</TableCell>
             <TableCell align="left">employeeType</TableCell>
             <TableCell align="left">mail</TableCell>
             <TableCell align="left">ou</TableCell>
             <TableCell align="left">sn</TableCell>
             <TableCell align="left">uid</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {data.map(row => (
             <TableRow>
               <TableCell component="th" scope="row">
               </TableCell>
               <TableCell align="left">{row.cn}</TableCell>
               <TableCell align="left">{row.description}</TableCell>
               <TableCell align="left">{row.employeeType}</TableCell>
               <TableCell align="left">{row.mail}</TableCell>
               <TableCell align="left">{row.ou}</TableCell>
               <TableCell align="left">{row.sn}</TableCell>
               <TableCell align="left">{row.ui}</TableCell>
             </TableRow>
           ))}
         </TableBody>
       </Table>
     </div>
   )
}

Явыбирая так:

userdetails.js

import React from "react"

import Layout from "../components/layout"
import UserDetails from "../components/userdetails"
import MainComponentWrapper from "../components/mainComponentWrapper"


const IndexPage = () => (
  <Layout>
    <MainComponentWrapper url="http://localhost:5000/user/<uid>">
      <UserDetails />

    </MainComponentWrapper>
  </Layout>
)
export default IndexPage