我正在使用react-router-dom v5.2。
[登录后，我希望页面从/home重定向到/。登录表单位于/。
[当我尝试在没有任何异步功能的情况下执行身份验证（即，将用户名和密码与硬编码值进行比较）时，一切正常。
但是当我使用express和mongo进行身份验证时，登录时的重定向将停止工作。如果我再次登录，则会发生重定向。受保护的路由仍然有效（如果用户未登录，则重定向到登录页面）。
这里是问题的小演示，其中我在express + mongo ie上使用了do auth。异步redux。这无法正常工作。 https://youtu.be/Zxm5GOYymZQ
这是应用程序的链接，在这里我使用硬编码的用户名和密码（均为“ test”）进行身份验证。这里没有异步。这按预期工作。用户名和密码均为“ test”。 https://poke-zoo.herokuapp.com/
这里是App.js：
const ProtectedRoute = ({ component: Component, ...rest }) => {
const authState = useSelector(selectorAuth)
// const location = useLocation()
return (
<Route
{...rest}
render={props => {
if (authState.isUserLoggedIn) {
return <Component {...props} />
} else {
return (
<Redirect
to={{
pathname: "/",
state: {
from: props.location,
},
}}
/>
)
}
}}
/>
)
}
const App = () => {
return (
<Router>
<div tw="flex flex-col bg-green-100 min-h-screen">
<Navbar />
<Switch>
<Route exact path="/" component={Landing} />
<ProtectedRoute path="/home" component={Home} />
<ProtectedRoute path="/explore" component={Explore} />
<Route path="*" component={() => "404 Not found."} />
</Switch>
</div>
</Router>
)
}
这里是ModalLogin.js。
const ModalLogin = props => {
const { loginModalBool, setLoginModalBool } = props
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const dispatch = useDispatch()
const history = useHistory()
const attemptLogin = e => {
e.preventDefault()
dispatch(tryLogin(username, password))
history.push("/home")
}
return (
<div tw="flex flex-col text-center h-full w-64 bg-gray-200 text-gray-900 rounded-lg shadow-lg p-2 md:p-4 lg:p-6">
<div tw="flex flex-row justify-between">
<p tw="text-lg">Login</p>
<button tw="text-sm" onClick={() => setLoginModalBool(!loginModalBool)}>
close
</button>
</div>
<div tw="flex flex-col justify-around my-1">
<form onSubmit={attemptLogin} tw="">
<input
tw="my-1"
value={username}
onChange={e => setUsername(e.target.value)}
placeholder="username"
/>
<input
tw="my-1"
value={password}
onChange={e => setPassword(e.target.value)}
type="password"
placeholder="password"
/>
<button
type="submit"
tw="my-1 p-1 rounded bg-gray-800 text-gray-100 hover:bg-gray-900"
>
log in
</button>
</form>
</div>
</div>
)
}
这里是authSlice.js。
import { createSlice } from "@reduxjs/toolkit"
import axios from "axios"
const initialState = {
isUserLoggedIn: false,
username: "",
}
export const authSlice = createSlice({
name: "auth",
initialState: initialState,
reducers: {
login: (state, action) => {
const user = action.payload
if (!user) return alert("Login failed. Incorrect username or password.")
state.username = user.username
state.isUserLoggedIn = true
},
logout: (state, action) => {
// window.localStorage.removeItem("loggedInUser")
state.username = ""
state.isUserLoggedIn = false
},
signup: (state, action) => {
const user = action.payload
state.username = user.data.username
state.isUserLoggedIn = true
},
},
})
export const tryLogin = (username, password) => {
return async dispatch => {
try {
const response = await axios.post("/api/auth/login", {
username: username,
password: password,
})
const user = {
token: response.headers["auth-token"],
username: response.data.username,
}
// window.localStorage.setItem("token", response.headers["auth-token"])
dispatch(login(user))
} catch (e) {
alert("Incorrect Username/Password.")
}
}
}
export const selectorAuth = state => state.auth
export const { login, logout } = authSlice.actions
export default authSlice.reducer
我在redux-toolkit中使用React-router错误吗？
这里是Github repo
您的代码在登录后未定义重定向逻辑。您可以通过两种方式进行。
1st：如果希望在身份验证的情况下重定向路由，则可以定义另一个重定向包装用于身份验证。
const AuthRoute = ({ component: Component, ...rest }) => {
const authState = useSelector(selectorAuth)
const location = useLocation()
return (
<Route
{...rest}
render={props => {
if (!authState.isUserLoggedIn) {
return <Component {...props} />
} else {
return (
<Redirect
to={{
pathname: "/home",
state: {
from: location,
},
}}
/>
)
}
}}
/>
)
}
const App = () => {
return (
<Router>
<div tw="flex flex-col bg-green-100 min-h-screen">
<Navbar />
<Switch>
// It is for login users to redirect to home page
<AuthRoute exact path="/" component={Landing} />
<ProtectedRoute path="/home" component={Home} />
<ProtectedRoute path="/explore" component={Explore} />
<Route path="*" component={() => "404 Not found."} />
</Switch>
</div>
</Router>
)
}
2nd：另一种方法可能必须使用history.push（）或history.replace（）：
const Layout = () => {
const authState = useSelector(selectorAuth);
const history = useHistory();
useEffect(() => {
// if isUserLoggedIn turned to true redirect to /home
if (authState.isUserLoggedIn) {
history.push("/home");
}
}, [authState.isUserLoggedIn]); // triggers when isUserLoggedIn changes
return (
<Switch>
<Route exact path="/" component={Landing} />
<ProtectedRoute path="/home" component={Home} />
<ProtectedRoute path="/explore" component={Explore} />
<Route path="*" component={() => "404 Not found."} />
</Switch>
);
};
const App = () => {
return (
<Router>
<div tw="flex flex-col bg-green-100 min-h-screen">
<Navbar />
<Layout />
</div>
</Router>
);
};
您的代码为什么不起作用？看看下面的代码：
<Route exact path="/" component={Landing} />
<ProtectedRoute path="/home" component={Home} />
<ProtectedRoute path="/explore" component={Explore} />
<Route path="*" component={() => "404 Not found."} />
它做什么？它从上到下检查您的浏览器路径，并检查其是否与给定的路由规则匹配。如果“路径”路径匹配，则它将渲染该组件；否则，它将继续向下访问每个“路径”，直到与您的404匹配为止。
回到您的情况；登录时，您没有离开“ /”路径。因为没有实现离开“ /”路径的逻辑。因此，即使它已通过身份验证，它也再次与登录页面匹配。它与路径路径匹配并停留在那里。它不会继续，请在ProtectedRoute上尝试您的逻辑。
老实说，我要做的是在用户登录时使用普通的旧javascript更改位置