React 和 Redux：操作后重定向

React 和 Redux 是一对非常强大的前端开发工具，它们的组合能够帮助开发者构建复杂的用户界面并管理状态。在实际开发中，我们经常需要在用户执行某些操作后进行页面重定向，以提供更好的用户体验。本文将介绍如何使用 React 和 Redux 来实现操作后的重定向，并提供一个案例代码作为示例。

javascript
// actions.js
export const redirect = (url) => ({
  type: 'REDIRECT',
  payload: url
});

javascript
// reducer.js
const initialState = {
  redirectUrl: null
};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'REDIRECT':
      return {
        ...state,
        redirectUrl: action.payload
      };
    default:
      return state;
  }
};
export default reducer;

javascript
// App.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Redirect, Route, Switch } from 'react-router-dom';
import { redirect } from './actions';
const App = () => {
  const dispatch = useDispatch();
  const redirectUrl = useSelector(state => state.redirectUrl);
  useEffect(() => {
    if (redirectUrl) {
      dispatch(redirect(null)); // 重定向后将 redirectUrl 置为 null
    }
  }, [dispatch, redirectUrl]);
  return (
    
      
        {redirectUrl && }
        {/* 这里是首页的内容 */}
      
      
        {/* 这里是关于页面的内容 */}
      
      {/* 其他路由 */}
    
  );
};
export default App;