小编Xev*_*Xev的帖子

如何使用反应路由通过 ID 返回页面?

我是 React 的新手,当我单击View按钮时,我很难弄清楚如何返回一个新页面(一个组件)。我有一个用户表,每行都有一个查看按钮。我只能在完全相同的页面中检索数据,但我想在另一个页面中检索我的视图详细信息,其 url 上的 id,例如:http://user-details-1。有人可以帮我弄这个吗。谢谢!

这是我的视图代码/组件:

import React, { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";

const ViewUserDetaiils = (props) => {
  const [user, setUser] = useState(props.currentUser);

  useEffect(() => {
    setUser(props.currentUser);
  }, [props]);

  return (
    <Form>
      <div>
        <div>
          <strong>Id:</strong> {user.id}{" "}
        </div>
        <div>
          <strong>Name:</strong> {user.name}{" "}
        </div>
        <div>
          <strong>Contact:</strong> {user.contact}{" "}
        </div>
        <div>
          <strong>Email:</strong> {user.email}{" "}
        </div>
      </div>
    </Form>
  );
};

export default ViewUserDetails;
Run Code Online (Sandbox Code Playgroud)

这是我的路由:

import React, { Component } from "react";
import …
Run Code Online (Sandbox Code Playgroud)

reactjs react-routing react-router-dom react-functional-component

4
推荐指数
1
解决办法
4717
查看次数