React Router存在已登录用户时无法显示SignIn组件的问题

这个问题的核心在于路由匹配逻辑的顺序缺失+未处理已登录状态下的登录页访问限制，我们一步步来修复：

1. 为主路由添加Switch并调整路由顺序 #

你的主路由组件里没有用Switch包裹路由，React Router默认会渲染所有路径匹配的路由——而/sign-in本身也会匹配/（因为是模糊匹配规则），所以即使访问/sign-in，PrivateRoute也会同时渲染AdminPanel，导致页面异常。

修改AppContent组件：

import React from 'react' 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 
import PrivateRoute from './PrivateRoute' 
import AdminPanel from './pages/AdminPanel/AdminPanel' 
import SignIn from './pages/SignIn' 
import '../assets/stylesheets/styles.scss' 

const AppContent = props => (
  <Router>
    <div>
      <Switch> {/* 用Switch包裹，确保只匹配第一个符合条件的路由 */}
        {/* 把登录路由放在最前面，让Switch优先匹配 */}
        <Route path='/sign-in' component={SignIn} />
        {/* PrivateRoute放在后面，匹配所有根路径下的子路由 */}
        <PrivateRoute path='/' component={AdminPanel} />
      </Switch>
    </div>
  </Router>
)

export default AppContent

2. 在SignIn组件中添加已登录重定向逻辑 #

现在Switch会优先匹配/sign-in，但已登录用户仍然可以手动输入地址访问登录页，我们需要在SignIn组件里增加状态判断，强制已登录用户跳转到后台面板：

修改SignIn组件：

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

class SignIn extends Component {
  render () {
    // 如果用户已登录，直接重定向到后台首页
    if (this.props.currentUser) {
      return <Redirect to='/' />
    }
    return (
      <div>SignIn</div>
    )
  }
}

// 连接Redux获取当前用户状态
export default connect(({ currentUser }) => ({ currentUser }))(SignIn)

3. 验证PrivateRoute逻辑（无需修改） #

你的PrivateRoute重定向逻辑是正常的：当currentUser为null时，会跳转至/sign-in并携带来源路径，这部分可以保留原代码。

修复逻辑说明 #

• Switch组件会按从上到下的顺序匹配路由，只会渲染第一个匹配成功的路由，避免了/和/sign-in同时匹配的问题。
• 登录页的重定向逻辑，确保了已登录用户无法通过任何方式访问登录页面，符合常规的后台权限逻辑。

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