Cómo pasar datos de una página a otra usando el enrutador de reacción

Resuelto Shadow_net asked hace 4 años • 0 respuestas

Por favor, necesito ayuda con reaccionar-router-dom, soy nuevo en la biblioteca y parece que puedo encontrar alguna solución desde entonces. Obtengo tres resultados de una llamada a la API, en la que asigno los datos para representarlos en la interfaz de usuario, ahora lo que necesito es que si hago clic en una fila en una de esta lista, quiero que me lleve a una pantalla que muestra los detalles de solo esa cosa en la que hice clic.

import React, { Component } from "react";

export default class User extends Component {
  state = { userDetails: "" };

  componentDidMount() {
    axios.get(`https://urlforapi.com`)
    .then(({ data }) => {
      this.setState({
        userDetails: data
      });
    });
  }

  render() {
    const { userDetails } = this.state;
    return (
      <div>
        {userDetails
          ? userDetails.map(info => {
              return (
                <Link to="/home/userDetails">
                  <div key={info.id}>
                    <p>{info.name}</p>
                  </div>
                  <div>
                    <p>{info.age}</p>
                  </div>
                  <div>
                    <p>{info.description}</p>
                  </div>
                </Link>
              );
            })
          : null}
      </div>
    );
  }
}

Jan 12 '20 11:01 Shadow_net

Aceptado

Opción 1: Estado de la ruta del pase

Envía el estado en la transición de ruta.

Usando react-router-domv6

Navegación declarativa: vincular o navegar componentes

La API de enlace cambió un poco en la versión 6, stateahora es un accesorio.
```
<Link
  to='/home/userDetails'
  state={{ infoId: info.id }}
>
```
o utilizando el Navigatecomponente, el sucesor espiritual/reemplazo del Redirectcomponente v5
```
<Navigate
  to="/home/userDetails"
  state={{ infoId: info.id }}
/>
```
Navegación imperativa: use el gancho de navegación
```
const navigate = useNavigate();

...

navigate('/home/userDetails', { state: { infoId: info.id } });
```
Luego puede descomprimir el estado del locationobjeto en el componente que devuelve esa ruta. Utilice protecciones en caso de que un usuario haya navegado '/home/userDetails'desde otro lugar, ya que statepuede no estar definido.
```
const { state: { infoId } = {} } = useLocation();
```
Usando react-router-domv5

Navegación declarativa: enlace a

Puede pasar algún estado exclusivo de la entrada asignada, como info.idjunto con el envío de ruta que ocurre cuando se hace clic en el enlace. Esto confunde los datos del usuario, ya que no se filtra información a la interfaz de usuario (es decir, al navegador).
```
<Link
  to={{
    pathname: '/home/userDetails',
    state: { infoId: info.id },
  }}
>
```
Navegación imperativa: gancho useHistory
```
const history = useHistory();

...

history.push({
  pathname: '/home/userDetails',
  state: { infoId: info.id },
});
```
Luego puede descomprimir el estado de la locationpropiedad/objeto en el componente que devuelve esa ruta. Utilice protecciones en caso de que un usuario haya navegado '/home/userDetails'desde otro lugar, ya que statepuede no estar definido.

Si se pasan los accesorios de ruta:
```
props.location && props.location.state && props.location.state.infoId
```
o
```
props.location?.state?.infoId
```
Si usa componentes de función, también puede usar el useLocationgancho React:
```
const { state: { infoId } = {} } = useLocation();
```

Opción 2: pasar algo en la ruta URL

<Link to={`/home/userDetails/${info.id}`>

o (RRDv6)

const navigate = useNavigate();

...

navigate(`/home/userDetails/${info.id}`);

o (RRDv5)

const history = useHistory();

...

history.push(`/home/userDetails/${info.id}`);

Y recupere el parámetro de la matchpropiedad en el componente de ruta devuelto. Por ejemplo, si la ruta se ve así:

Usando react-router-domv6

<Route path="/home/userDetails/:infoId" element={<Detail />} />

Solo existe el useParamsgancho en v6, no hay accesorios de ruta.

const { infoId } = useParams();

El usuario puede ver esto, pero no es necesario usar el patrón de protección para acceder, ya que, según las definiciones, estará definido por la ruta (aunque infoIDaún se puede definir si el usuario ingresa una identificación no válida).

Usando react-router-domv5
```
<Route path="/home/userDetails/:infoId" component={Detail} />
```
Luego, en el componente, obtenga la identificación de la matchpropiedad de ruta:
```
props.match.params.infoId
```
Y en el caso de los componentes de funciones, el useParamsgancho de React:
```
const { infoId } = useParams();
```

Opción 3: pasar algo en la cadena de consulta URL

Usando react-router-domv6

Navegación declarativa: vincular o navegar componentes

La API de enlace cambió un poco en la versión 6, stateahora es un accesorio.

<Link
  to={{
    pathname: '/home/userDetails',
    search: `?infoId=${info.id}`,
  }}
>

o utilizando el Navigatecomponente, el sucesor espiritual/reemplazo del Redirectcomponente v5

<Navigate
  to={{
    pathname: '/home/userDetails',
    search: `?infoId=${info.id}`,
  }}
/>

Navegación imperativa: use el gancho de navegación

const navigate = useNavigate();

...

navigate({
  pathname: '/home/userDetails',
  search: `?infoId=${info.id}`,
});

Luego puede descomprimir el infoIdparámetro de consulta del useSearchParamsgancho.

const [searchParams] = useSearchParams();
const infoId = searchParams.get("infoId");

Lo nuevo en v6.4.0 es la función de utilidad createSearchParams .

<Link
  to={{
    pathname: '/home/userDetails',
    search: createSearchParams({ infoId: info.id}),
  }}
>

navigate({
  pathname: '/home/userDetails',
  search: createSearchParams({ infoId: info.id}),
});

Usando react-router-domv5

Navegación declarativa: enlace a
```
<Link
  to={{
    pathname: '/home/userDetails',
    search: `?infoId=${info.id}`,
  }}
>
```
Navegación imperativa: use el gancho de navegación
```
const history = useHistory();

...

history.push({
  pathname: '/home/userDetails',
  search: `?infoId=${info.id}`,
});
```
Luego puede descomprimir el infoIdparámetro de consulta del locationaccesorio/objeto en el componente que devuelve esa ruta.

Si se pasan los accesorios de ruta:

props.location && props.location.search

o

props.location?.search

Si usa componentes de función, también puede usar el useLocationgancho React:

const { search } = useLocation();

Luego cree un objeto URLSearchParams y acceda al infoIdparámetro.
```
const searchParams = new URLSearchParams(search);
const infoId = searchParams.get("infoId");
```

Pero estoy usando un componente de clase React.

En react-router-dom@6la ruta withRouterse eliminaron los accesorios y HOC. Para acceder a los antiguos "accesorios de ruta" en RRDv6, necesitará crear su propio withRouterreemplazo de HOC que pueda usar los ganchos de React e inyectar accesorios que se pueden usar en los componentes de la clase React.

import { useLocation, useParams, /* other hooks */ } from 'react-router-dom'; 

const withRouter = WrappedComponent => props => {
  const location = useLocation();
  const params = useParams();
  // other hooks

  return (
    <WrappedComponent
      {...props}
      {...{ location, params, /* other hooks */ }}
    />
  );
};

Decora el componente y accede a los accesorios:

class MyComponent extends React.Component {
  ...

  this.props.location.state;
  this.props.params;
  ...etc...

  ...
};

export default withRouter(MyComponent);

Referencias

ubicación
fósforo
usarUbicación v5
usarUbicación v6
utilizarParams v5
utilizarParams v6
utilizarSearchParams v6.4.0

Jan 12 '2020 05:01 Drew Reese