如何使用React Router 4配置私有路由？附相关组件代码求助

嘿，你已经走在正确的路上啦！我来帮你完善这个私有路由组件，让它能顺畅工作。先梳理下你的代码里的小问题，再一步步把完整配置流程讲清楚：

你的代码问题修正 #

首先注意到一个拼写小错误：PrivaetRoute → PrivateRoute，这个细节会导致后续引用组件时出错。另外你没写完的mapStateToProps是核心环节，需要把Redux Store里的登录状态映射到组件的props中。

完整的私有路由组件 #

这里是补全并优化后的代码：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

// 修正组件名称拼写
class PrivateRoute extends React.Component {
  render() {
    // 解构props，分离出目标组件、登录状态、路由位置和剩余属性
    const { component: Component, loggedIn, location, ...rest } = this.props;

    return (
      <Route
        {...rest}
        render={(props) =>
          // 已登录则渲染目标组件，未登录则重定向到登录页
          loggedIn ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: '/', // 这里替换成你的实际登录页路径
                state: { from: location } // 保存用户原本访问的路径，登录后可跳转回来
              }}
            />
          )
        }
      />
    );
  }
}

// 把Redux Store中的登录状态映射到组件props
const mapStateToProps = (state) => ({
  loggedIn: state.auth.loggedIn // 这里要对应你Redux Store中登录状态的实际存储路径
});

// 用connect连接Redux和组件
export default connect(mapStateToProps)(PrivateRoute);

如何使用私有路由 #

在你的主路由配置文件里，把需要权限验证的路由用PrivateRoute替换普通的Route即可：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';
import Profile from './Profile';

function AppRouter() {
  return (
    <Router>
      <Switch>
        {/* 公开路由：无需登录即可访问 */}
        <Route path="/" exact component={LoginPage} />
        {/* 私有路由：必须登录才能访问 */}
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <PrivateRoute path="/profile" component={Profile} />
      </Switch>
    </Router>
  );
}

export default AppRouter;

额外优化建议 #

• 登录后跳转回原页面：在登录组件中，登录成功后可以读取location.state.from来跳转回用户原本想访问的页面，示例代码：

// 登录组件中的登录成功逻辑
const handleLoginSuccess = () => {
  const { history, location } = this.props;
  // 如果有来源路径就跳回去，没有就跳默认首页
  const redirectPath = location.state?.from?.pathname || '/dashboard';
  history.push(redirectPath);
};

• 加载状态处理：如果登录状态是异步获取的（比如从后端验证），可以在PrivateRoute中添加加载状态，避免页面闪烁：

// 在PrivateRoute的render方法开头添加判断
if (this.props.isLoading) {
  return <div>加载中...</div>; // 替换成你的自定义加载组件
}

内容的提问来源于stack exchange，提问作者forJ