0

estoy implementando un login en React utilizando un jwt que guardo en el localStorage y Express del lado del servidor, todo funciona bien, pero me da el siguiente error a la hora de usar Redirect:

You should not use <Redirect> outside a <Router>

He buscado en internet una respuesta, pero la mayoría de los ejemplos que he encontrado lo hacen de esta manera. Adjunto debajo el código de mi componente login. Muchas gracias de antemano.

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { GlobalStyle } from './Styles';
import { userLog } from '../FetchServer';
import { Redirect } from 'react-router-dom';

class Login extends Component {
	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields(async (err, values) => {
			if (!err) {
				console.log('Received values of form: ', values);
				var token = await userLog(values);
				console.log(token.data);
				if (token) {
					localStorage.setItem('token', JSON.stringify(token.data));
				}
			}
		});
	};

	render() {
		const token = localStorage.getItem('token');
		const tokenParse = JSON.parse(token);

		if (tokenParse) {
			return <Redirect to="/home" />;
		}

		const { getFieldDecorator } = this.props.form;
		return (
			<GlobalStyle id="components-form-demo-normal-login">
				<Form onSubmit={this.handleSubmit} className="login-form">
					<Form.Item>
						{getFieldDecorator('userName', {
							rules: [ { required: true, message: 'Please input your username!' } ]
						})(
							<Input
								prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
								placeholder="Username"
							/>
						)}
					</Form.Item>
					<Form.Item>
						{getFieldDecorator('password', {
							rules: [ { required: true, message: 'Please input your Password!' } ]
						})(
							<Input
								prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
								type="password"
								placeholder="Password"
							/>
						)}
					</Form.Item>
					<Form.Item>
						{getFieldDecorator('remember', {
							valuePropName: 'checked',
							initialValue: true
						})(<Checkbox>Remember me</Checkbox>)}
						<a className="login-form-forgot" href="register">
							Forgot password
						</a>
						<Button type="primary" htmlType="submit" className="login-form-button">
							Log in
						</Button>
						Or <a href="register">register now!</a>
					</Form.Item>
				</Form>
			</GlobalStyle>
		);
	}
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);

ReactDOM.render(<WrappedNormalLoginForm />, document.getElementById('root'));

export default WrappedNormalLoginForm;

2
  • No entendía el error hasta que vi la última parte de tu código. Normalmente ese error sucede cuando literal estás haciendo un render de Redirect fuera de un Router. Ya te haré una respuesta más elaborada el 1 abr. 2019 a las 15:48
  • Te voy a agradecer mucho por la respuesta, no sólo para resolver el error, sino también para ver si entiendo de una vez esto de un Redirect fuera de un Router, es que todavía no me queda bien claro.
    – EL LEO
    el 1 abr. 2019 a las 16:04

1 respuesta 1

0

Este error es muy común y a la ves descriptivo: You should not use <Redirect> outside a <Router>.

Para explicarte un poco qué sucede, los Router de react-router-dom tienen un contexto, al acceden sus componentes (Route, Redirect, Link, etc). Dicho contexto, tiene la información necesaria para ser lo que es: Un router.

No puedo asegurarte si el patrón exacto que usa react-router-dom es context pero es muy probable, y aún así muchas librerías que encuentres que usan react lo usan, así que te será muy similar. Para que funcione todo esto, necesitan de un componenten Provider que es el que provee el contexto, en el caso de react-router-dom viene siendo equivalente a Router (que puede ser BrowserRouter, HashRouter, etc) y básicamente definen el comportamiento del enrutador de tu aplicación, cada uno tiene una aplicación distinta de acuerdo a las diferentes necesidades. Pero lo importante a destacar es que estos como providers deben "envolver" tu aplicación, de la siguiente forma, y tal como la documentación lo dice:

import { BrowserRouter } from 'react-router-dom';

export default () => (
  <BrowserRouter>
     ...
     <App />
  </BrowserRouter>
);

Esta es la estructura recomendada por la librería, que el router sea la base de todo tu proyecto.

Ahora, en tu caso, no existe tal router dentro del código, de hecho, no existen rutas definidas para hacer el redirect y esa es la razón de tu error. Para corregirlo, podrías hacer algo como esto:

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { GlobalStyle } from './Styles';
import { userLog } from '../FetchServer';
import { BrowserRouter, Redirect } from 'react-router-dom';

class Login extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
        if (!err) {
            console.log('Received values of form: ', values);
            var token = await userLog(values);
            console.log(token.data);
            if (token) {
                localStorage.setItem('token', JSON.stringify(token.data));
            }
        }
    });
  };

  render() {
    const token = localStorage.getItem('token');
    const tokenParse = JSON.parse(token);
    const { getFieldDecorator } = this.props.form;

    return (
      <BrowserRouter>
        { tokenParse && <Redirect to="/home" /> }
        <GlobalStyle id="components-form-demo-normal-login">
            <Form onSubmit={this.handleSubmit} className="login-form">
                {/** Todo tu formular */}
            </Form>
        </GlobalStyle>
      </BrowserRouter>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);

ReactDOM.render(<WrappedNormalLoginForm />, document.getElementById('root'));

export default WrappedNormalLoginForm;

Como puedes ver, lo que hago es hacer el render del Redirect dentro del BrowserRouter, de esta forma ya puede tomar el contexto.

Ahora, hay otras formas de solucionar tu problema (siempre que estés en el contexto del Router) y es por medio de la función decoradora withRouter, la cual dota a tus componentes que no son hijos directos del router con capacidades para acceder al contexto del router. En la documentactión puedes verificar como funciona. Pero podrías solucionar tu problema con algo así (depende también a lo que estés implementando)

import React from 'react';
import { withRouter } from 'react-router-dom';

export default withRouter(class Page extends React.Component {
   componentDidMount() {
     const token = localStorage.getItem('token');
     const tokenParse = JSON.parse(token);

     // si hay token, redirecciona
     this.props.history.push('/home');
   }

   render() {
     // tu lógica de renderizado
   }
})
2
  • Muchas gracias German, tu respuesta me fue de gran ayuda, ahora entiendo como tiene que estar todo bien englobado dentro de los providers.
    – EL LEO
    el 1 abr. 2019 a las 17:14
  • De nada @ELLEO cualquier pregunta o inquietud que te quede, coménta y con gusto te ayudaré a resolver el 1 abr. 2019 a las 20:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.