登录后如何将用户重定向到用户指定的主页?特定于用户的url应该包含用户的_id

Question

class App extends Component {
componentDidMount() {
store.dispatch(loadUser());
}
render() {
return (
<React.Fragment>
<AppNavbar />
<div className="App">
<Switch>
<Route path="/not-found" component={NotFound} />
<AuthRoute path="/profile/settings" type="private">
<Profile />
</AuthRoute>
<AuthRoute path="/setup/school" type="private">
<SchoolDetails />
</AuthRoute>
<AuthRoute path="/setup/team" type="private">
<TeamManagement />
</AuthRoute>
<AuthRoute path="/create/teams" type="private">
<TeamSetup />
</AuthRoute>
<AuthRoute path="/register/setup" type="guest">
<ProfileSetup />
</AuthRoute>
<AuthRoute path="/events" type="private">
<SimpleSlider />
</AuthRoute>
<AuthRoute path="/register" type="guest">
<RegisterModal />
</AuthRoute>
<AuthRoute path="/login" type="guest">
<LoginModal />
</AuthRoute>
<AuthRoute exact path="/" type="private">
<SimpleSlider />
</AuthRoute>
<Redirect to="/not-found" />
</Switch>
</div>
</React.Fragment>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isAuthenticated,
user: state.auth.user,
});
export default connect(mapStateToProps)(App);

const AuthRoute = (props) => {
const { isAuthenticated, user, type } = props;
if (type == "guest" && isAuthenticated) {
//history.replace(`${lo}/${user._id}`);
return <Redirect to={`/events/${user._id}`} />;
} else if (type == "private" && !isAuthenticated)
return <Redirect to={`/login`} />;
return <Route {...props} />;
};
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isAuthenticated,
userloaded: state.auth.userloaded,
user: state.auth.user,
});
export default connect(mapStateToProps)(AuthRoute);

const initialState = {
token: localStorage.getItem("token"),
isAuthenticated: null,
userloaded: false,
isLoading: false,
user: null,
};
export default function (state = initialState, action) {
switch (action.type) {
case USER_LOADING:
return {
...state,
isLoading: true,
};
case USER_LOADED:
return {
...state,
user: action.payload,
userloaded: true,
isAuthenticated: true,
isLoading: false,
};
case LOGIN_SUCCESS:
case REGISTER_SUCCESS:
localStorage.setItem("token", action.payload.token);
return {
...state,
userloaded: true,
isAuthenticated: true,
isLoading: false,
...action.payload,
};
case AUTH_ERROR:
case LOGIN_FAIL:
case LOGOUT_SUCCESS:
case REGISTER_FAIL:
localStorage.removeItem("token");
return {
...state,
token: null,
user: null,
userloaded: false,
isAuthenticated: false,
isLoading: false,
};
default:
return state;
}
}

export const loadUser = () => (dispatch, getState) => {
// User loading
dispatch({ type: USER_LOADING });
axios
.get("/api/auth/user", tokenConfig(getState))
.then((res) =>
dispatch({
type: USER_LOADED,
payload: res.data,
})
)
.catch((err) => {
dispatch(returnErrors(err.response.data, err.response.status));
dispatch({ type: AUTH_ERROR });
});
};
// Register User
export const register =
({ name, email, password }) =>
(dispatch) => {
// Headers
const config = {
headers: {
"Content-Type": "application/json",
},
};
//Request body
const body = JSON.stringify({ name, email, password });
axios
.post("/api/users", body, config)
.then((res) =>
dispatch({
type: REGISTER_SUCCESS,
payload: res.data,
})
)
.catch((err) => {
dispatch(
returnErrors(err.response.data, err.response.status, "REGISTER_FAIL")
);
dispatch({
type: REGISTER_FAIL,
});
});
};
// Login User
export const login =
({ email, password }) =>
(dispatch) => {
// Headers
const config = {
headers: {
"Content-Type": "application/json",
},
};
//Request body
const body = JSON.stringify({ email, password });
axios
.post("/api/auth", body, config)
.then((res) =>
dispatch({
type: LOGIN_SUCCESS,
payload: res.data,
})
)
.catch((err) => {
dispatch(
returnErrors(err.response.data, err.response.status, "LOGIN_FAIL")
);
dispatch({
type: LOGIN_FAIL,
});
});
};
// Logout User
export const logout = () => {
return {
type: LOGOUT_SUCCESS,
};
};
// Setup config/headers and token
export const tokenConfig = (getState) => {
// Get token from localstorage
const token = getState().auth.token;
// Headers
const config = {
headers: {
"Content-type": "application/json",
},
};
// If token, add to headers
if (token) {
config.headers["x-auth-token"] = token;
}
return config;
};

我的问题是，每当用户登录到我的应用程序，他被重定向到主页，但我的"_id"来自redux存储的未定义。首先，在刷新页面之后，他被重定向到包含正确用户id的URL。例如,登录后=>用户被重定向到"/events/undefined"手动刷新后=>URL改为"/events/62a6503c9e8a60254ed94ff1">

旁注:每当刷新应用程序时，登录站点就会显示一瞬间。这是另一个无意的行为。

Answer 1

只是为了测试，也许你应该尝试和检查用户对象，当你重定向?像这样:

const AuthRoute = (props) => {
const { isAuthenticated, user, type } = props;
if (type == "guest" && isAuthenticated && user._id) {
//history.replace(`${lo}/${user._id}`);
return <Redirect to={`/events/${user._id}`} />;
} else if (type == "private" && !isAuthenticated)
return <Redirect to={`/login`} />;
return <Route {...props} />;
};
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isAuthenticated,
userloaded: state.auth.userloaded,
user: state.auth.user,
});