Saltar al contenido

Cómo redirigir de una página a otra página en React RouterDec, 11thIn este tutorial, vamos a aprender acerca de cómo redirigir a un usuario …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo redirigir a un usuario de una página a anotherpage en reaccionar-router mediante el componente de redireccionamiento.

Supongamos que tenemos un camino / blog en nuestra aplicación y actualización a / tutoriales para que ahora si intenta anyuser para navegar a / blog que necesitamos para redirigirlos a / tutoriales, podemos hacerlo por el componente usinga redirección proporcionada por el reaccionar de enrutador dom biblioteca.

En el siguiente código, en primer lugar el componente importado redirigirlo desde la biblioteca reaccionar de enrutador dom.

redirección componente acepta dos puntales de ya.

de : tenemos que escribir antiguo camino aquí (/ blog).

a : necesitamos a escriba una nueva ruta aquí (/ ma a riales).

import React from 'react';
import {BrowserRouter as Router,Route,
Redirect,Switch} from 'react-router-dom';import Home from './App.js';
import Tutorials from '.utorials.js';

function Routes(){
return (





)
}

Ahora bien, si ninguna de las visitas de los usuarios / blog que él o ella va a ser redirigido a / tutoriales.

programático de navegación

programático medios de navegación redirección tiene lugar en esa ruta cuando un evento en particular que sucede, por ejemplo, cuando un usuario hace clic en un botón de inicio de sesión, si tiene éxito entrada que necesitan para redirigirlos a ruta privada.

Hay dos posibles maneras en que podemos hacer la navegación programático.

Primera forma mediante el componente de redireccionamiento.

import React from 'react';
import {Redirect} from 'react-router-dom';
class Login extends React.Component {

onSubmit = () => {
if(userFound){
return }
}

render() {
return (



)
}
}

export default Login;

La segunda manera de acuerdo al objeto que es la historia apoyos dentro disponibles, aprobada por la biblioteca reaccionar-router.

import React from 'react';
class Login extends React.Component {

onSubmit = () => {
if(userFound){
this.props.history.push('/posts/'); }
}

render() {
return (



)
}
}

export default Login;