routing - hashrouter - react router privateroute

¿Cómo utilizar la función de redireccionamiento del router React?

Question

Quiero configurar React Router de la siguiente manera. Si una determinada ruta coincide, el usuario se redirige a otra. Documentation indica que es posible, pero no proporciona la manera exacta de lograrlo. ¿Alguien tiene una idea sobre esto?

type EnterHook = (nextState: RouterState, replaceState: RedirectFunction, callback?: Function) => any;

type RedirectFunction = (state: ?LocationState, pathname: Pathname | Path, query: ?Query) => void;

Answer 1

Aquí hay un ejemplo de cómo hacer esto con react-router 2.0.0 (usando replace lugar de replaceState ):

En router.jsx :

function requireAuth(nextState, replace) {
  if (!userExists()) {
    replace({
      pathname: ''/signin'',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

export const renderRoutes = () => (
  <Router history={browserHistory}>
      <Route path="protectedRoute" component={Protected} onEnter={requireAuth} />
      <Route path="signin" component={SignIn} />
    </Route>
  </Router>
);

Luego, dentro del componente SignIn , puede redireccionar después de un inicio de sesión exitoso como este:

import { browserHistory } from ''react-router'';

signInFunction({params}, (err, res) => {
  // Now in the sign in callback
  if (err)
    alert("Please try again")
  else {
    const location = this.props.location
    if (location.state && location.state.nextPathname) {
      browserHistory.push(location.state.nextPathname)
    } else {
      browserHistory.push(''/'')
    }
  }
})

Answer 2

Dirigirse a cualquiera que lea esta pregunta a partir de react-router 2.0.0, replaceState (estado, ruta de acceso, consulta) ahora está en desuso. Ahora debe usar reemplazar (ubicación) con un descriptor de ubicación.

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

De su guía:

// v1.0.x
(nextState, replaceState) => replaceState(null, ''/foo'')
(nextState, replaceState) => replaceState(null, ''/foo'', { the: ''query'' })

// v2.0.0
(nextState, replace) => replace(''/foo'')
(nextState, replace) => replace({ pathname: ''/foo'', query: { the: ''query'' } })

Answer 3

EDITAR Ver otra respuesta para la nueva sintaxis de enrutador de reacción no en desuso

Hay un buen ejemplo de cómo usar el gancho onEnter en el ejemplo de auth-flow . Aquí está el código relevante:

function requireAuth(nextState, replaceState) {
  if (!auth.loggedIn())
    replaceState({ nextPathname: nextState.location.pathname }, ''/login'')
}

render((
  <Router history={history}>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
      <Route path="logout" component={Logout} />
      <Route path="about" component={About} />
      <Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
    </Route>
  </Router>
), document.getElementById(''example''))

Como puede ver, cuando se accede a la ruta /dashboard , se llama a la función requireAuth . Recibe dos argumentos: nextState , que es un objeto RouterState que representa el estado que el usuario está a punto de ingresar, y replaceState , una RedirectFunction que se puede llamar para reemplazar ese estado con otra cosa. En este caso, si el usuario no ha iniciado sesión, requireAuth llama replaceState esta manera:

replaceState({ nextPathname: nextState.location.pathname }, ''/login'')

El segundo argumento es, obviamente, la ruta a la que se redireccionará el usuario. El primer argumento es un objeto que puede contener cualquier dato que deseamos que tenga el controlador de ruta (en este caso, el componente de Login ). Aquí, la ruta de acceso a la que el usuario intentaba ir a ( /dashboard ) se establece como la propiedad nextPathname , por lo que, después de iniciar sesión, el usuario puede ser redirigido a esa página (consulte el método handleSubmit en el componente Login ).

Si el usuario ha iniciado sesión, requireAuth no hace nada, y dado que replaceState nunca se llama, la ruta funciona como es habitual, es decir, el componente del Dashboard control se procesa.