Dev Faq
0
votes

Comment puis-je rediriger via réagir le routeur v4

basé sur le isloggedin code> J'ai besoin de passer à différents composants.

Je reçois la page de connexion mais je ne pouvais pas rendre la page d'accueil. P> 

{this.state.isLoggedIn ?
    (
      <Route
        path='/home'
        render={() => <HomePage  onLogout={this.onLogout} />}
      />
    )
    :
    (
      <Route exact path='/' component={() => <LoginPage onLogin={this.onLogin} />}/>
    )
}

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser ceci.props.history.push (myRouts) et envoyer la route dans l'argument. Cela vous redirigera à la route souhaitée.

0 commentaires
2
votes

Vous pouvez rediriger en rendant un code> naviguer dans un nouvel emplacement. Le nouvel emplacement remplacera l'emplacement actuel de la pile d'historique, comme les redirections côté serveur (HTTP 3XX). 

<Redirect to={{
    pathname: '/dashboard',
    state: { id: '123' }
}} />

6 commentaires

Comment puis-je envoyer les accessoires aux composants de cette redirection?

Permettez-moi d'ajouter un autre exemple en réponse. @Reninja j'ai ajouté un exemple pour passer des accessoires de redirection. Vérifiez s'il vous plaît

Où puis-je spécifier le nom du composant Page d'accueil

Je pense que vous pouvez vérifier ce tutoriel blog.pshrmn.com/ientry/ Simple-réact-routeur-v4-didacticiel a revenir (

); afin que vous puissiez déclarer composant pour la route et rediriger vers cette route

Obtenir une erreur d'analyse dans le redirection Ligne 36: Erreur d'analyse: jeton inattendu, attendu "," 34 | 36 | onlogout: {this.onlogout} | ^ 37 | }} /> 38 | ): (39 |

J'ai essayé le code ci-dessous mais la page d'accueil n'est pas rendu `{this.state.loggedin? (

} /> ): ( } />)} `

1
votes

Utilisez Rediriger

à partir de votre composant parent, passez ceci.state.loggedin comme des accessoires à la composante de connexion et de la page d'accueil.

dans le composant de loginpage xxx

Faites de même dans votre composant de la page d'accueil Avec le chemin de redirection '/' à la place.

2 commentaires

Est-ce que ça va de rediriger dans la fonction rendu ()? Et quelle est la différence entre "" et "cela.props.history.push ('/ home');"

Désolé pour la réponse tardive. Oui, ça va de rediriger dans le rendu car est un composant d'un réact. Les différences entre ces deux sont ici: Stackoverflow.com/a/54452810/10104154

Articles qui pourrait vous intéresser :

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint
Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0
La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?