javascript - 如果有用户,React Router 不显示登录
问题描述
我有一个像这样的主要路线组件
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
这里是PrivateRoute.jsx
import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
const PrivateRoute = ({ component: Component, currentUser, ...rest }) => (
<Route
{...rest}
render={props =>
currentUser ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: '/sign-in',
state: { from: props.location }
}}
/>
)
}
/>
)
export default connect(({ currentUser }) => ({ currentUser }))(PrivateRoute)
所以如果currentUser
为空,它会重定向到/sign-in
哪个很好。但是问题是如果有currentUser
,我去/sign-in
我仍然得到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
而SignIn
组件只是一个普通的基于类的组件
import React, { Component } from 'react'
class SignIn extends Component {
render () {
return (
<div>SignIn</div>
)
}
}
export default SignIn
解决方案
推荐阅读
- f# - 试图扩展结果类型.. 不成功,在 F#
- c# - Blazor - 尝试用新行格式化文本区域
- javascript - 关于填充 p5.js 中褪色的问题
- web-crawler - 爬虫机器人用户代理格式
- python - Apache Beam - 调试垃圾收集以避免 OOM 问题
- c++ - 从父级的 wndproc 访问特定子窗口的最佳实践
- cors - 网站未发送“Allow-Access-Control-Origin”标头,但浏览器仍显示页面
- python - Python Selenium find_element_by_name 跳到第二个元素
- scala - 在 docker 容器内运行的 Akka Actor (Scala) 应用程序重新启动,日志中没有显示任何错误
- wampserver - 稍后将在我创建的 Wampserver 清理数据库文件中加载 phpmyadmin