Реактивный маршрутизатор не рендерит компонент после перенаправления - PullRequest
Новая
       21

Реактивный маршрутизатор не рендерит компонент после перенаправления

0 голосов
/ 02 апреля 2020

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

INDEX. JS FILE (здесь добавлен только необходимый фрагмент) 

import AuthContextProvider from './context/auth-context';

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

ЗДЕСЬ МОЕ ПРИЛОЖЕНИЕ. JS

import React, { useContext } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container } from 'reactstrap';
import Navbar from './components/shared/Navbar/Navbar';
import Home from './components/Home/Home';
import Login from './components/Auth/Login/Login';
import Signup from './components/Auth/Signup/Signup';
import Footer from './components/shared/Footer/Footer'
import { AuthContext } from './context/auth-context';
import MyAccount from "./components/User/MyAccount";
import Logout from "./components/Auth/Logout/Logout";
import Error from "./components/Error";

const App = (props) => {
  const authContext = useContext(AuthContext);
  let routes;
  console.log(authContext.isAuth, 'in app');
  if (authContext.isAuth) {
    routes = (
      <>
        <Route path="/my-account" component={MyAccount} />
        <Route path="/logout" component={Logout} />
      </>
    );
  } else {
    routes = (
      <>
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
      </>
    );
  }


  return (
    <BrowserRouter>
      <Container>
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home}  />
          {routes}
          <Route component={Error} />
        </Switch>
        <Footer />
      </Container>
    </BrowserRouter>
  );
}

export default App;

ЗДЕСЬ МОЙ АВТО-КОНТЕКСТ. JS

import React, { useState } from 'react';

export const AuthContext = React.createContext({
  isAuth: false,
  login: () => {}
});

const AuthContextProvider = props => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  if(localStorage.getItem('token') != null && !isAuthenticated){
    setIsAuthenticated(true);
  }

  const loginHandler = () => {
    setIsAuthenticated(true);
  };
  //console.log(isAuthenticated,'ssss')
  return (
    <AuthContext.Provider
      value={{ login: loginHandler, isAuth: isAuthenticated }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

ЗДЕСЬ ВЫХОД. JS

import React, { useState ,useEffect, useContext } from "react";
import { AuthContext } from '../../../context/auth-context';
import { Redirect, withRouter } from 'react-router-dom';

const Logout = (props) => {

    const authContext = useContext(AuthContext);
    let [isLogout, setIsLogout] = useState(false);

    localStorage.removeItem('token');
    localStorage.removeItem('expiryDate');
    localStorage.removeItem('userId');

     useEffect(() =>{
        setIsLogout((preIsLogout) => {
            isLogout = !preIsLogout;
        });
        authContext.isAuth = false;
        console.log('logout', isLogout)
        //props.history.push('/login');

    },[])



    return (
        <React.Fragment>
         { isLogout ? <Redirect to="/login" /> : null} 
            <div>
                <p>Logout</p>
            </div>
        </React.Fragment>
    )


}

export default withRouter(Logout);
...