Блог

У меня есть два частных маршрута в моем приложении, но они продолжают указывать на один и тот же компонент панели мониторинга.

App.js

 function App() {
  return (
    
      <Router>
        <AuthProvider>
        <Header />
        <div>
          <Switch>
            <Route path="/" exact component={Home}/>
            <RegistrationRoute path="/signup" component={SignUp} />
            <RegistrationRoute path="/login" component={Login} />
            <PrivateRoute path="/user/name" component={DetailForm} exact={true}/>
            <PrivateRoute path="/dash" component={Dashboard}/>
          </Switch>
        </div>
        <Footer />
        </AuthProvider>
    </Router>
  
    
  );
}

 

Частный маршрут

 import React from 'react'
import { Route, Redirect } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';


const PrivateRoute = ({ component: Component, ...rest }) => {
    const { isAuth, currentUser, loading } = useAuth();
    console.log(rest)
    return (
        <Route
            {...rest}
            render={props => {
                return isAuth ? <Component {...props} /> : <Redirect to="/login" />
            }}/>
        
    )
}

 

RegistrationRoute

 import React from 'react'
import { useAuth } from '../contexts/AuthContext';
import { Route, Redirect } from 'react-router-dom';


const RegistrationRoute = ({ component: Component, ...rest }) => {
    const { isAuth } = useAuth();
    
    return (
        <Route
        {...rest}
            render={props => !isAuth ? <Component {...props} /> : <Redirect to="/dash" />}>
            
        </Route>
    )
}
 

Моя функция входа в систему нажимает на «/ dash».
Моя функция регистрации пытается перейти к «/ user / name»

но я продолжаю перенаправляться на / dash

Помогите мне, пожалуйста, и спасибо вам <3

РЕДАКТИРОВАТЬ: AuthContext

 import React, { useContext, useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom';
import axios from 'axios';
import { login, signup, logout, checkAuth } from '../util/AuthRoutes';
const AuthContext = React.createContext();

export const useAuth = () => {
    return useContext(AuthContext);
}

export const AuthProvider = ({ children }) => {
    const [isAuth, setIsAuth] = useState();
    const [currentUser, setCurrentUser] = useState();
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const history = useHistory();
    
    const signUp = async (signUpInfo) => {
        const result = await signup(signUpInfo);
        if(result.data.auth) {
                setCurrentUser(result.data.user);
                setIsAuth(true);
                history.push("/user/name");
        }
         
    }

    const logIn = async (loginInfo) => {
        setLoading(true);
        const result = await login(loginInfo);
        console.log(result);
            if(result.data.auth) {
                setLoading(false);
                setCurrentUser(result.data.user);
                setIsAuth(true);
                history.push("/dash");
            }
           
    }

    const logOut = () => {
        setIsAuth(false);
        setLoading(true)
        axios.get('http://localhost:4000/logout', { withCredentials: true })
        .then(res => {
            setLoading(false);
            console.log(res);
            setCurrentUser(null);
            history.push("/");
        })
        .catch(err => {
            console.log(err);
        })
    }

    
    useEffect(() => {
            setLoading(true);
            axios.get('http://localhost:4000/checkauth', { withCredentials: true })
            .then(res => {
                if(res.data.auth){
                    setCurrentUser(res.data.session.user);
                    setLoading(false);
                    setIsAuth(true);
                    console.log(res);
                }
            }).catch(err => {
                console.log(err);
                setLoading(false);
                history.push("/")
            })
    }, [isAuth]);

    const value = {
        currentUser,
        setCurrentUser,
        signUp,
        logIn,
        logOut,
        error,
        loading,
        isAuth
    }
    return (
        <AuthContext.Provider value={value}>
            {!loading amp;amp; children}
        </AuthContext.Provider>
    )
}

export default AuthContext