0
votes

Comment utiliser réagir le routeur pour modifier les itinéraires de l'intérieur d'un composant qui est également acheminé dans le composant principal app.js?

Voici mon app.js qui contient le composant wrapper (home) et le tableau de bord que je veux rediriger après que je vous connecte avec succès.

import React from "react";
import { Link,withRouter } from "react-router-dom";

const Info = () => {
  return (
    <div className="bg-white-60 br3">
      <p className="f1 center pa3 orange sans-serif">
        Sick? Skip the clinic queue! <br />
        Register now to book an appointment
      </p>
      <div className="ph3">
        <Link
          className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
          to="/signin"
        >
          Sign in
        </Link>
        <Link
          className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
          to="/register"
        >
          Register
        </Link>
      </div>
    </div>
  );
};

export default withRouter(Info);


4 commentaires

Votre itinéraire principal sera un seul, votre navigation de nidification peut être multiples.


J'ai posté une référence qui vous aidera à comprendre votre besoin si ce n'est pas le faire savoir personnalisera le routage imbriqué.


De l'App.js, si je supprimai le exacte . Cela fonctionne presque bien, mais l'emballage rend toujours en sorte que mon tableau de bord ne peut pas le remplacer. Au lieu de cela, le tableau de bord apparaît en dessous. Il faut y avoir un moyen de contourner


Pouvez-vous partager la boite de sable pour que je puisse vérifier?


3 Réponses :


1
votes

supprimer exactement à partir de et déplacez-le vers le bas de commutateur


1 commentaires

Je sais que c'est un correctif brut, mais cela fait le travail. Je le collerais pour le moment, merci



0
votes

ou vous pouvez le faire comme ça. Enveloppez tous les sous-composants (signin ou inscription ...) pour envelopper.

et dans votre wrapper, ajoutez {ceci.props.child}

Je préfère ainsi parce que je peux gérer des itinéraires au même endroit.

app xxx

wrapper xxx

login ou composant signé xxx


0 commentaires

0
votes

Comme VLAD dit, vous devez d'abord supprimer le exacte code> à partir de / code>, mais également le déplacer vers le bas, après le / tableau de bord code> itinéraire, Donc, si l'URL est exactement / tableau de bord code> correspondra au composant code> tableau de bord code>, sinon correspondra au composant wrapper code>. Cela devrait fonctionner:

function App() {
  return (     
      <Switch>
          <Route exact path="/dashboard" component={Dashboard} />
          <Route path="/" component={Wrapper} />
      </Switch>

  );
}


0 commentaires