reactjs - 如何使用 react 路由通过 ID 返回页面？

Question

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

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;

这是我的路由:

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./containers/Home/Home";
import ViewUserDetails from "./forms/ViewUserDetails";
import PageNotFound from "./page404/page404";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/home" component={Home} />
            <Route
              exact
              path="/view-contact-details/"
              component={ViewUserDetails}
            />
            <Route component={PageNotFound} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

这是我的 View 按钮的代码，该按钮位于另一个组件(UserTable 组件)中。:

             <Link to="/view-contact-details">
               <Button
                  onClick={() => {
                    props.viewRow(user);
                  }}
                  className="Button muted-Button"
                >
                  View
                </Button>
              </Link>

Answer 1

您的路由必须包含一个 slug(URL 的最后一部分，在本例中为用户 ID)以动态路由它。

<Route
  exact
  path="/view-contact-details/:id"
  component={ViewUserDetails}
/>

然后在您组件的 Link 中，您将一个对象传递给属性 to 。它接受路径名(包含 slug/id 的路径)和状态(包含您的状态/数据)。

<Link
  to={{
    pathname: `/view-contact-details/${user.id}`,
    state: { users: user }
  }}
>
  <button>View</button>
</Link>;

最后，在您的 ViewUserDetails 组件中，您可以使用 useLocation 来获取在 Link 中传递的状态。

import React from "react";
import { useLocation, Link } from "react-router-dom";
import Form from "react-bootstrap/Form";

const ViewUserDetails = _ => {
  const { state } = useLocation();

  return (
      <Form>
        <div>
          <div>
            <strong>Id:</strong> {state.users.id}{" "}
          </div>
          <div>
            <strong>Name:</strong> {state.users.name}{" "}
          </div>
        </div>
      </Form>
  );
};

export default ViewUserDetails;

这是一个有效的 demo 以防您想查看它。