#reactjs #react-router-dom
#reactjs #react-router-dom
Вопрос:
У меня есть два частных маршрута в моем приложении, но они продолжают указывать на один и тот же компонент панели мониторинга.
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
Комментарии:
1. Я подозреваю, что это связано с тем, что проверка подлинности заключена в область видимости, когда отображаются частные / регистрационные маршруты, и не пересматривается в возвращаемой
Route
функции визуализации. Это устаревшее состояние. Когда ваше состояние аутентификации изменяется, вы проверили, что оно обновляется в этих компонентах?2. Можете ли вы поделиться кодом в useAuth()?
3. Просто поделился им!
4. @DrewReese о, мои хорошие, большое вам спасибо. В итоге я убедился, что isAuth и !загрузка произошли до рендеринга <Route> в частном маршруте, и это сработало!