javascript - example - Cambiar la URL en react-router v4 sin usar Redirect o Link

react router redirect programmatically

Question

Esta pregunta ya tiene una respuesta aquí:

• Navegación programática usando react-router 4 respuestas

Estoy usando react-router v4 y material-ui en mi aplicación React. Me preguntaba cómo cambiar la URL una vez que se haga clic en un GridTile dentro de GridList .

Mi idea inicial fue usar un controlador para onTouchTap . Sin embargo, la única manera que puedo ver para redirigir es usando los componentes Redirect o Link . ¿Cómo podría cambiar la URL sin representar esos dos componentes?

He intentado this.context.router.push(''/foo'') pero no parece funcionar.

Answer 1

React Router v4

Hay un par de cosas que necesitaba para que esto funcione sin problemas.

La página de documentos en el flujo de trabajo de autenticación tiene bastante de lo que se requiere.

Sin embargo tuve tres problemas

1. ¿De props.history viene la props.history los props.history ?
2. ¿Cómo lo paso a mi componente que no está directamente dentro del componente Route
3. ¿Qué pasa si quiero otros props ?

Terminé usando:

1. Opción 2 de una respuesta en ''Navegar mediante programación usando el enrutador de reacción'' , es decir, usar <Route render> props.history <Route render> que le permite obtener una props.history que puede transmitirse a los niños.
2. Use render={routeProps => <MyComponent {...props} {routeProps} />} para combinar otros props de esta respuesta en ''reaccionar-enrutador - pasar los props al componente controlador''

NB: con el método de render , debe pasar explícitamente por los componentes Route componente Route . También desea usar render y no component por razones de rendimiento (el component fuerza una recarga cada vez).

const App = (props) => (
    <Route 
        path="/home" 
        render={routeProps => <MyComponent {...props} {...routeProps}>}
    />
)

const MyComponent = (props) => (
    /**
     * @link https://reacttraining.com/react-router/web/example/auth-workflow
     * N.B. I use `props.history` instead of `history`
     */
    <button onClick={() => {
        fakeAuth.signout(() => props.history.push(''/foo''))
    }}>Sign out</button>
)

Una de las cosas confusas que encontré es que en algunos de los documentos de React Router v4 usan MyComponent = ({ match }) es decir, desestructuración de objetos , lo que significaba que inicialmente no me di cuenta de que Route pasa tres props, match , location y la history

Creo que algunas de las otras respuestas aquí suponen que todo se hace a través de clases de JavaScript.

Aquí hay un ejemplo, y además, si no necesita pasar ningún objeto a través de usted, solo puede usar el component

class App extends React.Component {
    render () {
        <Route 
            path="/home" 
            component={MyComponent}
        />
    }
}

class MyComponent extends React.Component {
    render () {
        /**
         * @link https://reacttraining.com/react-router/web/example/auth-workflow
         * N.B. I use `props.history` instead of `history`
         */
        <button onClick={() => {
            this.fakeAuth.signout(() => this.props.history.push(''/foo''))
        }}>Sign out</button>
    }
}

Answer 2

Así es como hice una cosa similar. Tengo mosaicos que son miniaturas de los videos de YouTube. Cuando hago clic en el mosaico, me redirige a una página de ''jugador'' que usa el ''video_id'' para mostrar el video correcto a la página.

<GridTile
  key={video_id}
  title={video_title}
  containerElement={<Link to={`/player/${video_id}`}/>}
 >

ETA: Lo sentimos, solo noté que no quería usar los componentes LINK o REDIRECT por alguna razón. Tal vez mi respuesta todavía ayude de alguna manera. ; )

Answer 3

Estoy usando esto para redireccionar con React Router v4 :

this.props.history.push(''/foo'');

Espero que te funcione;)

Answer 4

Prueba esto,

this.props.router.push(''/foo'')

La advertencia funciona para versiones anteriores a v4.

y

this.props.history.push(''/foo'')

para v4 y superior