web-dev-qa-db-fra.com

Comment implémenter le routage dynamique dans routes.js pour les éléments de menu générés dans la barre latérale dans le passe-partout Universal React Redux par Erikras

Je travaille actuellement sur un projet basé sur CMS.

Pour lesquels j'utilise le passe-partout universel React Redux d'Erikras

J'ai vraiment besoin de suggestions sur la gestion du routage dynamique

Prenons un scénario simple depuis le passe-partout ...

Dans routes.js

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

data.js

export const data = [
  {id: 1, property: 'Dashboard', link: '/'},
  {id: 2, property: 'Login', link: '/login'},
  {id: 3, property: 'About Us', link: '/About'},
];

maintenant, disons sur la base du rôle de l'utilisateur, les propriétés des données json changeront

disons nouvelle propriété: est 

{id: 4, property: 'test page', link: '/test'}

Lorsque react rendra les composants, comment il connaîtra le lien de route .. car il n'est pas défini dans les routes.js

Je ne parviens pas à la mettre en œuvre correctement

Nous avons besoin d'une barre latérale composée d'un contenu de menu spécifique selon le rôle de l'utilisateur.

Disons que nous construisons un système de réservation, il peut y avoir différents rôles d'utilisateur comme administrateur, mode de maintenance, rôle d'assistant.

Donc, un rôle différent aura des propriétés différentes, nous devons donc générer le menu sur la base de celui-ci, car les propriétés différeront certainement selon le rôle de l'utilisateur.

Merci!!

reactjsmenuitemreact-router
24
Dev

D'après votre exemple, le composant à rendre pour /test url? Je suppose que c'est la valeur de la clé property, non?

Première option

Vous pouvez faire quelque chose comme ceci:

<Route path="/:page" component={Page}/>

Il vous permettra de rendre le composant Page pour chaque URL, qui commence à partir de / et ce composant aura l'URL de la page à l'intérieur this.props.routeParams.page. Il vous permet de trouver le composant nécessaire dans Page#render:

render() {
  const url = this.props.routeParams.page;
  const PageComponent = data.find(page => page.link === url).property;
  render <PageComponent />;
}

Deuxième option

Vous pouvez générer des itinéraires dynamiquement, mais je ne sais pas si cela fonctionne (vous pouvez le vérifier). Vous devez juste remplacer cette partie:

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

avec

 data.map(page => <Route path={page.link} component={page.property} key={page.id}/>)
27
Alexandr Subbotin