React Router v5 是 React 的一个路由库,用于管理单页应用(SPA)中的页面导航和组件渲染。它允许你根据 URL 路径来决定渲染哪个组件。
Redux Toolkit 是 Redux 的官方工具集,旨在简化 Redux 的使用。它包含了一些工具和最佳实践,使得创建和管理 Redux store 更加容易。
BrowserRouter
:基于 HTML5 history API 的路由。HashRouter
:基于 URL hash 的路由。MemoryRouter
:在内存中维护路由状态,通常用于服务器渲染或测试。createSlice
:用于创建 reducer 和 action creators。configureStore
:用于创建 Redux store。createAsyncThunk
:用于处理异步操作。在登录时重定向页面通常涉及到以下几个步骤:
// store.js
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice';
export const store = configureStore({
reducer: {
auth: authReducer,
},
});
// authSlice.js
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
isLoggedIn: false,
};
export const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
loginSuccess(state) {
state.isLoggedIn = true;
},
},
});
export const { loginSuccess } = authSlice.actions;
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';
import LoginPage from './LoginPage';
import HomePage from './HomePage';
function App() {
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
return (
<Router>
<Switch>
<Route path="/login">
{isLoggedIn ? <Redirect to="/" /> : <LoginPage />}
</Route>
<Route path="/">
{isLoggedIn ? <HomePage /> : <Redirect to="/login" />}
</Route>
</Switch>
</Router>
);
}
export default App;
// LoginPage.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { loginSuccess } from './authSlice';
function LoginPage() {
const dispatch = useDispatch();
const handleLogin = () => {
// 模拟登录成功
dispatch(loginSuccess());
};
return (
<div>
<h1>Login Page</h1>
<button onClick={handleLogin}>Login</button>
</div>
);
}
export default LoginPage;
useSelector
和 useDispatch
正确使用。Redirect
组件正确配置。loginSuccess
action 被正确触发。Route
和 Switch
组件正确配置。通过以上步骤和示例代码,你应该能够在使用 React Router v5 和 Redux Toolkit 进行登录时实现页面重定向。
领取专属 10元无门槛券
手把手带您无忧上云