0

Я использую React-router v3, у меня есть компонент в котором я хочу проверять есть ли авторизация у пользователя, вот код компонента :

import { Redirect } from 'react-router';
import Dashboard from '../pages/dashboard';
import Login from './login';

export default class AuthContainer extends React.Component {
constructor(props) {
super(props);
this.state = { isAuth: 2 };
}

render() {
const { isAuth } = this.state;

if (isAuth === 1) {
  return (
    <Redirect from="/authChecker" to="/dashboard" />
  );
}
return (
  <Redirect from="/authChecker" to="/login" />
);
}
}

Но мне выдает следующую ошибку :

1]

Пробовал менять на тег Route не помогает, та же ошибка. Во что нужно обернуть или как выдать этот редирект что бы он заработал?

]2

1 ответ 1

1

Ошибка заключается в том что <Redirect /> не является дочерним компонентом первого уровня, по отношению к <Route />.

Документация рекомендует использовать такой подход:

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

Тоесть делать проверку авторизации в компоненте с роутами и в зависимости от этого рендерить тот или иной компонент.

Вариант №1:

Чтобы не смешивать код, можно вынести функционал по проверке авторизации в отдельный файл. Например:

./src/services/auth.js

export const isAuthorized = () => {
    // функцонал проверки
};

./src/Routers.js

import { Route, Redirect } from 'react-router';
import { isAuthorized } from './services/auth';

<Route exact path="/" render={() => (
  isAuthorized() ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

Вариант №2

Исходя из названия Вашего компонента <AuthContainer /> можно предположить что Вы хотите обернуть компоненты доступные только авторизованным юзерам в него, а остальные проигнорировать. Вот как это можно реализовать:

import Dashboard from '../pages/dashboard';
import Login from './login';

export default class AuthContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isAuth: 2 };
  }

  componentDidMount() {
    const { isAuth } = this.state;
    if (isAuth !== 1) {
      window.location.href = "/login"
    }
  }

  render() {
    return this.props.children;
  }
}

Использовать нативный редирект.

3
  • Спасибо за полный ответ, я читал документацию и делал по ней как в варианте 1, но в таком случае мне выдает ошибку : Invariant Violation: AuthChecker.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. Я добавил в вопрос скрин этого варианта. 4 янв 2019 в 6:05
  • 1
    Не путайте. У вас есть файл с роутингом? Метод номер один должен использоваться там без дополнительных компонентов 4 янв 2019 в 6:18
  • Сделал все в файле routes - export default и просто этот один роут, мне просто возвращает пустую страницу, никуда не перенаправляет( 4 янв 2019 в 6:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.