Supposons que j'ai 2 pages et plusieurs composants. La première page est la page de connexion et l'autre page est le menu principal. La page de connexion n'a que 1 composant. Une fois que l'utilisateur s'est connecté au site Web, je souhaite réacteur-routeur de naviguer dans le menu principal, le menu principal contient NAVBAR et certains composants ci-dessous. Je veux que cela puisse accéder à chaque composant et garder la barre NAV en haut tout au long de l'heure même que l'URL a été modifiée.
Ici, le code que j'ai essayé Avec ce code, je ne peux pas accéder à la page de menu et à la page de connexion, mais je ne peux pas naviguer dans la boutique et les catégories qui sont le composant enfant du menu principal
4 Réponses :
Vous devez avoir une page d'accueil maintenant si de chez vous, vous voulez aller au menu
Vous pouvez faire comme ça Ce composant rendra dans la page d'accueil où vous définissez des itinéraires imbriqués afin que le composant d'itinéraire correspondant soit rendu
J'ai essayé votre code et ça fonctionne bien, mais peut-il être comme chemin = "/ menu" ou chemin = "/ profil" indépendamment.
Oui, ce sera, si vous voulez montrer le seul menu au niveau de la racine, c'est bien
Je suppose que vous devriez envisager de créer des composants de conteneur. Lorsque le premier conteneur contiendra vos itinéraires de connexion, nommément "authentifier", et les autres composants doivent être dans les itinéraires d'applications, nommément "Conteur d'applications". Et vous pouvez avoir votre propre wrapper.
const AppRoutes = () => {
return (
<>
<Navigation scrolling={scrolling} />
<Switch>
<ProtectedRoute exact path="/profile" component={UserProfile} />
<ProtectedRoute exact path="/my-orders" component={MyOrders} />
<ProtectedRoute path="/my-saved-result" component={SavedResults} />
</Switch>
</>
)
}
Si vous utilisez réacteur-routeur v4 code>, vous pouvez code> commutateur code> composant pour définir de manière préventive vos itinéraires comme ci-dessous: import { Switch, Route, Redirect } from 'react-router-dom';
const MenuForm = () => (
<div className="app-routes">
<NavBar />
<Switch>
<Route exact path="/menu">
<Redirect to="/menu/shop" />
</Route>
<Route path="/menu/shop" component={Shop} />
<Route path="/menu/categories" component={Categories} />
</Switch>
</div>
);
Et si vous avez / login & / mot de passe-réinitialiser itinéraire qui n'a pas
J'utilise comme celui-ci
<Link to="/reports"> <p>Reports</p> </Link>
La barre NAV devrait donc être disponible sur les itinéraires de menu et de connexion Oui?
Non, la barre NAV ne doit apparaître que dans le menu principal