Как вернуть страницу по id через React Routing? - PullRequest
Новая
       30

Как вернуть страницу по id через React Routing?

1 голос
/ 02 августа 2020

Я новичок в React, и мне трудно понять, как вернуть новую страницу (компонент), когда я нажал кнопку View . У меня есть таблица пользователей, и в каждой строке есть кнопка Просмотр . Я могу получить данные только на той же странице, но я хотел бы получить данные о моем представлении на другой странице с его идентификатором в URL-адресе, например: 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;

Вот моя маршрутизация: 

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>

1 Ответ

1 голос
/ 02 августа 2020

Ваш маршрут должен включать slug (последняя часть URL-адреса, в данном случае идентификатор пользователя) для динамической маршрутизации. 

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

Затем в вашем компоненте Link вы можете использовать to построить объект. Там вы передаете путь (с ярлыком / id) и состояние (например, реквизит, он содержит ваше состояние / данные). 

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

Наконец, в ваших компонентах ViewUserDetails вы можете использовать useLocation hook , чтобы получить состояние, переданное в 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;

Вот рабочая демонстрация на случай, если вы захотите ее проверить.

...