Javascript 反应路由器不'；如果有用户，则不显示登录

我有一个像这样的主要路线组件

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>
    <PrivateRoute path='/' component={AdminPanel} />
    <Route path='/sign-in' component={SignIn} />
  </div>
</Router>

export default AppContent

---

因此，如果

currentUser

为空，它将重定向到

/登录

，这是完全正确的。但是问题是，如果存在

currentUser

，并且我转到

/登录

，我仍然会得到

AdminPanel

组件

这是

currentUser

减速器和

AdminPanel

组件，以备需要

import { SIGNIN, SIGNOUT } from '../actions/types'

// so here the default state is null, however if I change it to `{}` which will mean there is a user then I am not able to go to the `/sign-in`
export default (state = null, action) => {
  switch (action.type) {
    case SIGNIN:
      return action.payload
    case SIGNOUT:
      return null
    default:
      return state
  }
}

和

AdminPanel

import React, { Component } from 'react'

import { Route, Switch } from 'react-router-dom'

import Box, { Container } from 'react-layout-components'

import LeftMenu from '../../components/AdminPanel/LeftMenu'
import Header from '../../components/AdminPanel/Header'

import Home from './Home'
import Dashboard from './Dashboard'
import Categories from './Categories'
import Partners from './Partners'
import Users from './Users'
import TeamMembers from './TeamMembers'
import Settings from './Settings'
import Help from './Help'

class AdminPanel extends Component {
  render () {
    return (
      <Box>
        <Container minWidth={300}>
          <LeftMenu />
        </Container>
        <Container padding='15px' width='100%'>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/dashboard' component={Dashboard} />
            <Route exact path='/categories' component={Categories} />
            <Route exact path='/partners' component={Partners} />
            <Route exact path='/users' component={Users} />
            <Route exact path='/team-members' component={TeamMembers} />
            <Route exact path='/settings' component={Settings} />
            <Route exact path='/help' component={Help} />
          </Switch>
          <Header />
        </Container>
      </Box>
    )
  }
}

export default AdminPanel

---

“但是问题是，如果有currentUser，并且我转到/登录，我仍然会得到AdminPanel组件。”您的登录组件如何？很奇怪，你让AdminPanel进入/登录，因为有一个登录组件的路径。是否有重定向？了解该实例中的props和rest也是很有帮助的。@devserkan它只是一个基于类的组件，其中有一个div。现在没有了。您可以在编辑的问题中看到它。@JayJordan SignIn只是从react router、

历史记录、
位置和
匹配中获得道具。好的，所以问题是，如果您没有currentUser，它会登录，但如果有currentUser，它会将您引导到管理面板？它应该把你引向何方？
import React, { Component } from 'react'

import { Route, Switch } from 'react-router-dom'

import Box, { Container } from 'react-layout-components'

import LeftMenu from '../../components/AdminPanel/LeftMenu'
import Header from '../../components/AdminPanel/Header'

import Home from './Home'
import Dashboard from './Dashboard'
import Categories from './Categories'
import Partners from './Partners'
import Users from './Users'
import TeamMembers from './TeamMembers'
import Settings from './Settings'
import Help from './Help'

class AdminPanel extends Component {
  render () {
    return (
      <Box>
        <Container minWidth={300}>
          <LeftMenu />
        </Container>
        <Container padding='15px' width='100%'>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/dashboard' component={Dashboard} />
            <Route exact path='/categories' component={Categories} />
            <Route exact path='/partners' component={Partners} />
            <Route exact path='/users' component={Users} />
            <Route exact path='/team-members' component={TeamMembers} />
            <Route exact path='/settings' component={Settings} />
            <Route exact path='/help' component={Help} />
          </Switch>
          <Header />
        </Container>
      </Box>
    )
  }
}

export default AdminPanel

import React, { Component } from 'react'

class SignIn extends Component {
  render () {
    return (
      <div>SignIn</div>
    )
  }
}

export default SignIn