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读取数据，该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文件才能使用createpage，但是我不知道这是否适用于我的情况。

感谢您的帮助。

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"});
    }

};

我假设有一种情况，您的页面文件夹中有一个名为“ user.js”的页面，当有人从列表中单击某个用户时要呈现该页面。此“ user.js”页面应显示您单击的用户的详细信息。您可以将列表中的链接设置为“用户/此用户的cn的值”。

页面文件夹中的每个页面都会调用“ onCreatePage”钩子。因此，您的“ user.js”文件也将通过此处。到时，您可以使用createPage操作创建页面，并传入一个额外的参数：matchPath，在这种情况下，它将匹配任何以“ user”开头的路径。网址的“ cn”部分将作为属性传递到页面，因此您可以从那里用用户的cn调用API端点，并呈现用户详细信息。

希望这会有所帮助！

从我的API获取用户详细信息的动态路由

1 个答案: