React Router - перенаправление входа на частный маршрут вместо этого идет на целевую страницу - PullRequest
Новая
       3

React Router - перенаправление входа на частный маршрут вместо этого идет на целевую страницу

0 голосов
/ 10 марта 2020

У меня запущена аутентификация, но я пытаюсь получить перенаправление на страницу приложения (личный маршрут) после успешного входа. Вместо этого пользователь перенаправляется на целевую страницу, на которой он должен перейти к Страница приложения вручную.

Мой маршрут упакован следующим образом 

      <Router>
        <div className="app">
          <Route exact path="/" component={Landing} />
          <PrivateRoute exact path="/app" component={AppHome} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/signup" component={SignUp} />
        </div>
      </Router>

Где компонент входа проверяет и перенаправляет через 

  const { currentUser } = useContext(AuthContext);

  if (currentUser) {
    console.log(currentUser)
    return <Redirect to="/app" />
  }

Полный компонент входа 

import React, { useCallback, useContext } from 'react'
import { BrowserRouter as Router, Link } from 'react-router-dom'
import { withRouter, Redirect } from 'react-router'
import FBase from '../firebase.js'
import { AuthContext } from '../auth/Auth'

const Login = ({ history }) => {
  const handleLogin = useCallback(
    async event => {
      event.preventDefault()
      const { email, password } = event.target.elements;
      try {
        await FBase
          .auth()
          .signInWithEmailAndPassword(email.value, password.value);
        history.push('/')
      } catch (error) {
        alert(error)
      }
    },
    [history]
  );

  const { currentUser } = useContext(AuthContext);

  if (currentUser) {
    console.log(currentUser)
    return <Redirect to="/app" />
  }

  return (
    ///UI - Form calls handleLogin
  )
}

export default withRouter(Login)

Консоль четко регистрирует пользователя после успешного входа в систему, поэтому это может быть проблемой жизненного цикла.

Сам частный маршрут (перенаправление здесь работает) 

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext)
  return (
    <Route
      {...rest}
      render = {routeProps => !!currentUser ? (
        <RouteComponent {...routeProps} />
      ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  )
}

После дальнейшего тестирования кажется, что перенаправление просто не работает вообще, так как я тоже пытался перенаправить на регистрацию.

1 Ответ

0 голосов
/ 10 марта 2020

Вы можете использовать ловушку useHistory для обработки перенаправления, это проще, и вы можете напрямую реализовать это в своей функции async / await. 

import {useHistory} from "react-router-dom"
const history = useHistory()

async function foo(){
 const res = await stuff
 history.push("/app")
}

Кроме того, не пишите точный путь везде на вашем маршруте. Это необходимо только для основного root "/".

...