I’m trying to make it so you get redirected back to the home page after a successful login, but i don’t quite know how to make that. Login works I just don’t know how to make it so it redirects you. i’m using React@18 btw .Can someone please help?
Login.jsx
const Login = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const { isFetching, error } = useSelector((state) => state.user);
const handleClick = (e) => {
e.preventDefault();
login(dispatch, { username, password });
};
return (
<Container>
<Wrapper>
<Title>SIGN IN</Title>
<Form>
<Input
placeholder="username"
onChange={(e) => setUsername(e.target.value)}
/>
<Input
placeholder="password"
type="password"
onChange={(e) => setPassword(e.target.value)}
/>
<Button onClick={handleClick} disabled={isFetching}>
LOGIN
</Button>
{error && <Error>Something went wrong...</Error>}
<Link>YOU DON'T REMEMBER YOUR PASSWORD?</Link>
<Link>CREATE A NEW ACCOUNT</Link>
</Form>
</Wrapper>
</Container>
);
};
apiCallsjs
import { publicRequest } from "../requestMethods";
import { loginFailure, loginStart, loginSuccess } from "./userRedux";
export const login = async (dispatch, user) => {
dispatch(loginStart());
try {
const res = await publicRequest.post("/auth/login", user);
dispatch(loginSuccess(res.data));
} catch (err) {
dispatch(loginFailure());
}
};
userReduxjs
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user",
initialState: {
currentUse: null,
isFetching: false,
error: false,
},
reducers: {
loginStart: (state) => {
state.isFetching = true;
},
loginSuccess: (state, action) => {
state.isFetching = false;
state.currentUser = action.payload;
},
loginFailure: (state) => {
state.isFetching = false;
state.error = true;
},
},
});
export const { loginStart, loginSuccess, loginFailure } = userSlice.actions;
export default userSlice.reducer;
App.jsx
const App = () => {
const user = useSelector((state)=>state.user.currentUser);
const navigate = useNavigate()
return (
<Router>
<Routes>
<Route exact path="/" element={<Home/>} />
<Route path="/products/:category" element={<ProductList/>} />
<Route path="/product/:id" element={<Product/>} />
<Route path="/cart" element={<Cart/>} />
<Route path="/success" element={<Success/>} />
{/* <Route path="/login">{user ? <Navigate to="/" /> : <Login />}</Route> */}
<Route path="/login">{user ? navigate("/") : <Login/>}</Route>
<Route path="/login" element={<Login/>}/>
<Route path="/register" element={<Register/>} />
</Routes>
</Router>
);
};
export default App;
I’ve tried using the navigate hook, but it redirects you even if you’ve failed the login.