reactjs - script - react helmet sync

Cómo implementar el enrutamiento dinámico en routes.js para los elementos de menú generados en la barra lateral en universal reaccionar redux estándar de erikras (2)

Actualmente estoy trabajando en un proyecto basado en CMS.

Para lo cual estoy usando el modelo repetitivo universal de reducción de reacciones de Erikras

Realmente necesito sugerencias sobre el manejo del enrutamiento dinámico

Tomemos un escenario simple de la repetición ...

En 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''}, ];

ahora, digamos sobre la base de la función del usuario, las propiedades en los datos json cambiarán

digamos nueva propiedad: es

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

Cuando reaccionar representará los componentes, cómo se conocerá el enlace de la ruta ... ya que no está definido en las rutas.js

No estoy obteniendo el camino correcto para implementarlo

Necesitamos una barra lateral hecha de contenido de menú específico según la función del usuario.

Digamos que estamos construyendo un sistema de reserva, puede haber diferentes roles de usuario como administrador, modo de mantenimiento, rol de asistente.

Por lo tanto, un rol diferente tendrá diferentes propiedades, por lo tanto, necesitamos generar el menú sobre la base, ya que las propiedades definitivamente difieren según el rol del usuario.

¡¡Gracias!!

No está claro a partir de su ejemplo, ¿qué componente debe representarse para /test url? Supongo que es el valor de la clave de property , ¿verdad?

Primera opción

Puedes hacer es algo como esto:

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

Le permitirá representar el componente de Page para cada url, que parte de / y este componente tendrá la url de la página dentro de this.props.routeParams.page . Le permite encontrar el componente necesario dentro del Page#render :

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

Segunda opción

Puede generar rutas dinámicamente, pero no estoy seguro si funciona (puede verificarlo). Solo debes reemplazar esta parte:

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

con

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

Tercera opción:

Siga el ejemplo del router de reacción ''grandes aplicaciones'' para cargar rutas dinámicamente.

La estructura del proyecto proporciona una jerarquía lógica para las rutas y los componentes. Su enfoque también usa el paquete web para cargar paquetes compartidos con código de paquete específico de la página. El proyecto tiene una carpeta de rutas. En el ejemplo, la porción dinámica de la jerarquía se deriva de datos en la carpeta de stubs que se pueden cambiar para usar otra fuente de datos. El enfoque fue efectivo.

`` `El repositorio ya no incluye este ejemplo en la rama maestra.