登录REACT后返回相同的路由

Question

我正在我的应用程序中进行firebase身份验证

在我的App.js中，我正在启动此方法。。

store.dispatch(isLoggedIn())

isLoggedIn()就是这样做的

export const isLoggedIn = () => dispatch => {
API.auth().onAuthStateChanged(user => {
if (user) {
dispatch(setCurrentUser(user))
} else {
dispatch(setCurrentUser({}))
}
})
}

在App.js中我有

store.dispatch(isLoggedIn())
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<React.Fragment>
<Route exact path="/login" component={Login} />
<Switch>
<PrivateRoute exact path="/" component={Dashboard} />
</Switch>
<Switch>
<PrivateRoute
exact
path="/stats"
component={Stats}
/>
</Switch>
</React.Fragment>
</Router>
</Provider>
)
}
}
export default App;

同样对于PrivateRoute，我正在使用此

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
<Route
{...rest}
render={props =>
auth.isAuthenticated === true ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

现在的问题是，isLoggedIn((可以工作，但这就是工作方式。

我会得到/，它会将我重定向到/login，然后是LoggedIn？

它会把我带回到/，但当我去/stats时，它会让我回到login，然后再回到/，而不是/stats？？

如何返回到我开始使用的页面？没有授权？

Answer 1

您可以为未确定的身份验证状态引入一个附加状态，然后仅在身份验证状态为已知后才呈现路由器。这将防止您过早重定向。