0
votes

Comment rediriger vers un autre composant en configurant des accessoires de ce composant dans React.js

Je crée une simple application de connexion en appliquant une partie de ma propre logique. L'authentification a réussi et j'ai besoin de rediriger vers un autre composant après la connexion et je dois prendre le nom de la composante de connexion à mon composant domestique afin que je puisse afficher comme "bienvenue -name-" dans ce composant

J'ai essayé des accessoires de passage et il n'a pas fonctionné p>

c'est mon login.js: p> xxx pré>

ceci est ma maison.js: p>

    import React from 'react';

    const Home = (props)=>{
        return(<h1>Welcome {props.name}</h1>);
    }
    export default Home;

reactjs

1 commentaires

Vous pouvez utiliser React-Router-Dom. Il suffit d'envoyer un param avec la valeur que vous vouliez lors de la routage vers la page d'accueil.

3 Réponses :

0
votes

Je crois que c'est le problème. Lors de la mise en place d'objets ou d'éléments JS, etc. dans une chaîne, vous devez spécifier que vous ajoutez un objet en enveloppant la chaîne dans des citations arrière. Essayez d'envelopper votre texte dans la balise dans les citations arrière et préfixez votre objet JS (les accessoires de votre passage) avec un signe dollar. Cela permet de réagir que la chaîne contiendra également JS, plutôt qu'une seule chaîne de texte. Dans votre cas, vous pouvez également avoir besoin de la "ceci" lié comme: xxx pré>

Je ne suis pas tout à fait sûr comment expliquer "ceci", peut-être que quelqu'un d'autre peut préciser davantage. Vous trouverez ci-dessous le changement de code dans le contexte de votre fichier home.js. P>

import React from 'react';

const Home = (props)=>{
    return(<h1>`Welcome ${props.name}`</h1>);
}
export default Home;

1 commentaires

Bonjour, merci beaucoup pour la réponse et pour les souhaits. Malheureusement, cela n'a pas aidé. En bref, je suis dans la nécessité de prendre le nom qui est dans l'état de mon composant login.js et de la transmettre comme un accessoire à mon composant Home.js. Cela fonctionnait sans routage. Mais, je ne suis pas en mesure de faire avec routage et je dois le faire comme quand cela.state.response === 200 qui est un signe que je suis défini pour une connexion réussie

0
votes

Il y a peu d'options pour vous.

Vous pouvez le dépasser via une chaîne de requête. mais ce n'est pas accessible à travers accessoires.
Si vous avez configuré une bibliothèque de gestion de l'état comme REDUX, vous peut définir le magasin avec les détails de la personne enregistrée, puis connectez-vous Page d'accueil à cette section spécifique du magasin Redux. Ensuite, vous pouvez y accéder via des accessoires.
Store Détails de l'utilisateur enregistré dans le navigateur local du navigateur (vous pouvez vouloir plus de détails sur utilisateur connecté que le nom à l'avenir). Je pense pour ce type de fonctionnalité c'est la meilleure solution. Pas via des accessoires qui passent. Ensuite, ces informations sont facilement et facilement disponibles dans votre application.
acclamations,

0 commentaires

0
votes

Vous avez plusieurs options pour ce problème, mais j'ai remarqué que vous utilisez réacteur-routeur-dom code> afin que vous puissiez faire l'une des opérations suivantes:


  transmettez le nom d'utilisateur comme paramètre de l'URL:  p>

 XXX  PRE>  LI>
 ul> 
 et redirige comme ceci:  p>  xxx  pré> 

 Utilisez  redx  code> pour stocker vos variables dans un magasin global et y accéder de n'importe où.  Li>
 ul>  constantes.js:  p>  xxx  pré> 
 action.js:  p>  xxx  pré> 
 réducteur.js: 
import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('username', username);

1 commentaires

Je vous remercie beaucoup. La première solution a vraiment aidé. Je n'ai aucune connaissance de Redux. Doit apprendre.