Recuerda que en las ciencias cualquier problema casi siempre tiene más de una resoluciones, por lo tanto aquí te mostramos lo más óptimo y mejor.
Solución:
Creo que tu mejor opción probablemente sea utilizar el método oculto state, o cadenas de consulta (para enlaces permanentes), o ambos, especialmente si un modal (por ejemplo, un modal de inicio de sesión) podría mostrarse en cualquier página. En caso de que no lo sepa, React Router expone el state parte de la API de historial, lo que le permite almacenar datos en el historial del usuario que no son visibles en la URL.
Aquí hay un conjunto de rutas que tengo en mente; puedes saltar directamente al ejemplo de trabajo en JSBin si tu quieres. También puede ver la aplicación de ejemplo resultante en su propia ventana para que pueda ver cómo cambian las URL (utiliza la estrategia de ubicación hash para compatibilidad con JSBin) y para asegurarse de que la actualización funcione como es de esperar.
const router = (
);
Investiguemos estas rutas y sus componentes.
Ante todo, makeComponent es solo un método que requiere string y crea un componente de React que hace que string como encabezado y luego todos sus hijos; es solo una forma rápida de crear componentes.
LoginRedirect es un componente con un propósito: verificar si la ruta es /logino si hay un ?login consulta string en el camino actual. Si alguno de estos son true, y el estado actual no contiene el login key, establece el login key en el estado para true. La ruta se utiliza si ningún la ruta secundaria coincide (es decir, el componente siempre se representa).
class LoginRedirect extends React.Component
componentWillMount()
this.handleLoginRedirect(this.props);
componentWillReceiveProps(nextProps)
this.handleLoginRedirect(nextProps);
handleLoginRedirect(props)
const location = props;
const state = location.state
render()
return React.Children.only(this.props.children);
Si no desea utilizar cadenas de consulta para mostrar el modo de inicio de sesión, por supuesto, puede modificar este componente para adaptarlo a sus necesidades.
El siguiente es LocationDisplay, pero es solo un componente que construí para la demostración de JSBin que muestra información sobre la ruta, el estado y la consulta actuales, y también muestra un conjunto de enlaces que demuestran la funcionalidad de la aplicación.
El estado de inicio de sesión es importante para el siguiente componente, ModalCheck. Este componente es responsable de verificar el estado actual de la login (o profile, o potencialmente cualquier otro) keys y mostrar el modal asociado según corresponda. (La demostración de JSBin implementa un modal súper simple, el tuyo sin duda será mejor. 🙂 También muestra el estado de las comprobaciones modales en forma de texto en la página principal).
class ModalCheck extends React.Component
render()
Todo lo demás es algo bastante estándar de React Router. Lo único que hay que tener en cuenta son las Links adentro LocationDisplay que muestran cómo puede vincular a varios lugares en su aplicación, mostrando modales en ciertas circunstancias.
En primer lugar, puede, por supuesto, vincular (y enlace permanente) a cualquier página que le solicite que muestre el modo de inicio de sesión mediante el login key en la consulta string:
/one?login
/two?login
También puede, por supuesto, vincular directamente al /login URL.
A continuación, observe que puede establecer explícitamente el estado para que se muestre un modal, y esto no cambiar la URL. Sin embargo, persistirá en el historial, por lo que se puede usar atrás / adelante como era de esperar, y una actualización mostrará el modal en la parte superior de la misma página de fondo.
/one with login state
/two with login state
También puede vincular al Actual página, agregando un modal particular.
const path = props.location.pathname;
current path + login state
current path + profile state
Por supuesto, dependiendo de cómo desee que funcione su aplicación, no todo esto es aplicable o útil. Por ejemplo, a menos que un modal sea verdaderamente global (es decir, se puede mostrar no importa la ruta), esto puede funcionar bien, pero para modales como mostrar el perfil de un usuario dado, probablemente lo haría una ruta separada, anidando en el padre, por ejemplo:
UserProfile, en este caso, sería un componente que renderiza un modal.
Otro ejemplo en el que puede querer hacer un cambio es almacenar ciertos modales en el historial; si no quieres, usa replaceState en vez de setState según sea apropiado.
Si posees alguna vacilación o forma de progresar nuestro crónica eres capaz de ejecutar un informe y con placer lo interpretaremos.