React Router 4.x - 连接到 Redux 后 PrivateRoute 不工作

React Router 4.x 连接到 Redux 后 PrivateRoute 不工作

最近，在使用 React Router 4.x 和 Redux 构建一个 React 应用时，我遇到了一个问题。我尝试创建一个私有路由（PrivateRoute），以便只有经过身份验证的用户才能访问某些页面。然而，在将 React Router 连接到 Redux 后，我发现私有路由无法正常工作。在本文中，我将讨论这个问题，并提供一些解决方案。

问题描述

在 React Router 4.x 中，我们可以使用 `` 组件来定义路由。为了创建一个私有路由，我们可以使用一个自定义的组件来包装 ``，并在该组件中进行身份验证。以下是一个简单的示例：

javascript
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
      {...rest}
    render={props =>
      isAuthenticated ? (
        
      ) : (
        
      )
    }
  />
);
export default PrivateRoute;

在上面的代码中，`PrivateRoute` 组件接收一个 `component` 属性，该属性是要保护的组件，以及一个 `isAuthenticated` 属性，用于验证用户是否已登录。如果用户已登录，则渲染 `component`，否则重定向到登录页面。

然而，当我们将 React Router 连接到 Redux 后，私有路由就无法正常工作了。即使用户已登录，私有路由也会将用户重定向到登录页面。

解决方案

要解决这个问题，我们需要确保将 Redux 的状态传递给私有路由组件，以便它可以正确地进行身份验证。下面是一种解决方案：

首先，我们需要将 `isAuthenticated` 属性存储在 Redux 的状态中。我们可以使用 Redux 的 `connect` 函数将状态传递给私有路由组件。以下是修改后的代码：

javascript
import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
      {...rest}
    render={props =>
      isAuthenticated ? (
        
      ) : (
        
      )
    }
  />
);
const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps)(PrivateRoute);

在上面的代码中，我们使用 `connect` 函数将 `isAuthenticated` 属性传递给 `PrivateRoute` 组件。

案例代码

下面是一个简单的案例代码，演示了如何使用 React Router 4.x 和 Redux 创建一个具有私有路由的 React 应用：

javascript
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import PrivateRoute from './PrivateRoute';
import Home from './Home';
import Login from './Login';
import rootReducer from './reducers';
const store = createStore(rootReducer);
ReactDOM.render(
  
    
      
        
        
      
    
  ,
  document.getElementById('root')
);

javascript
// PrivateRoute.js
import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
      {...rest}
    render={props =>
      isAuthenticated ? (
        
      ) : (
        
      )
    }
  />
);
const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps)(PrivateRoute);

javascript
// Home.js
import React from 'react';
const Home = () => (
  
    Welcome to the Home Page!
    You can only access this page if you are logged in.
  
);
export default Home;

javascript
// Login.js
import React from 'react';
const Login = () => (
  
    Login Page
    Please login to access the Home page.
  
);
export default Login;

在上面的代码中，`Home` 组件是受保护的私有路由，只有在用户已登录时才能访问。`Login` 组件是登录页面。

通过以上解决方案，我们成功地将 React Router 4.x 和 Redux 连接并使私有路由正常工作。

在使用 React Router 4.x 和 Redux 构建 React 应用时，私有路由可能会遇到问题。然而，通过将 Redux 的状态传递给私有路由组件，我们可以解决这个问题。在这篇文章中，我讨论了这个问题，并提供了一个解决方案和案例代码。希望这对你有所帮助！

上一篇：React Router 4 的默认路由下一篇：React Router 6 和 Typescript - 索引属性类型“true”不可分配给类型“false”不明确的'。

=

React Router 6 和 Typescript - 索引属性类型“true”不可分配给类型“false”不明确的'。: 　　　　使用React Router 6和Typescript构建应用程序时，可能会遇到索引属性类型错误的问题。在使用React Router 6时，我们经常需要在路由配置中为特定的路由添加一些额外的属性。...... ...
React Router 4.x - 连接到 Redux 后 PrivateRoute 不工作: 　　　　React Router 4.x 连接到 Redux 后 PrivateRoute 不工作最近，在使用 React Router 4.x 和 Redux 构建一个 React 应用时，我遇到了一个问题。我尝试创建一个私有路由（Priv...... ...
React Router 4 的默认路由: 　　　　React Router 4 是一个用于 React 应用程序的流行的路由库。它提供了一种简单而强大的方式来管理应用程序的不同页面之间的导航。React Router 4 的默认路由使得在应用程序中...... ...
React Router 4 正则表达式路径 - 匹配找不到参数: 　　　　React Router是一个用于构建单页应用程序的库，它提供了一种简单而强大的方式来管理应用程序的路由。在React Router 4中，我们可以使用正则表达式路径来匹配URL，并根据匹配...... ...
React router 4 不会更新链接上的视图，但会在刷新时更新: 　　　　React Router是一个用于构建单页应用的强大工具，它帮助我们管理URL和页面之间的映射关系。在React Router 4中，我们会注意到一个有趣的特性：当我们在应用中导航时，链接上...... ...
React Router 4 Match 返回未定义: 　　　　React Router是一个用于构建单页面应用程序的库，它提供了一种简单、灵活、可扩展的方式来管理应用程序中的路由。在React Router 4中，Match是一个用于匹配URL路径和组件的...... ...
React router 4 History.listen 永远不会触发: 　　　　React Router 4 是一个用于构建单页面应用的常用工具，它提供了强大的导航功能。其中的 History 对象在路由变化时负责监听并触发相应的操作。然而，有时候我们可能会遇到一...... ...
React Router - 路由器和交换机有什么区别: 　　　　React Router 是一个用于构建单页应用程序的库，它提供了一种将应用程序的不同组件与 URL 路径相匹配的方式。它可以帮助开发者创建多个页面和导航功能，使用户能够在应用程...... ...
React Router - 更新版本后 withRouter 出现 Typescript 错误: 　　　　使用React Router的withRouter装饰器是一个常见的技术，它在React组件中注入路由相关的props。然而，最近的React Router更新可能导致在TypeScript项目中出现一些错误。当我...... ...
React router - 更新 URL 哈希而不重新渲染页面: 　　　　使用React开发Web应用程序时，经常会使用React Router来管理应用程序的路由。React Router是一个强大的库，可以帮助我们在应用程序中实现页面之间的导航和URL的管理。在某些...... ...
React router - 嵌套路由不起作用: 　　　　React router - 嵌套路由不起作用在使用React构建单页面应用时，React Router是一个常用的路由库。它可以帮助我们实现页面之间的跳转和导航。然而，有时候我们可能会遇到嵌...... ...
React router - 将路由上的 props 传递给子组件: 　　　　使用React Router时，我们经常需要将路由上的props传递给子组件。这是因为路由通常用于导航不同页面，并且我们常常需要在这些页面之间共享数据或进行一些操作。React Route...... ...
React Router - 如何约束路由匹配中的参数: 　　　　React Router - 如何约束路由匹配中的参数？在使用 React Router 进行路由管理的过程中，我们经常需要在路由匹配中使用参数。然而，有时候我们希望对这些参数进行一些约束，...... ...
React Router - 如何动态替换字符串中的参数: 　　　　使用React Router时，我们经常需要在路由路径中动态传递参数。这对于构建动态的、可重用的组件非常有用，因为我们可以根据不同的参数呈现不同的内容。在本文中，我将向您展...... ...
React Route 组件处理除“login”之外的所有“”路由: 　　　　在 React 应用中，我们经常需要根据不同的路由显示不同的组件。React Router 是一个非常流行的路由库，它提供了一种简单而强大的方式来管理应用的路由。在使用 React Route...... ...