I need help here.
I've already found a similar question here in StackOverflow (Similar Question)
I've read and try to figure out what could be wrong with my code. I'm a little bit new as a developer and I'm still learning how to debug a code, so please sorry if the answer is pop uping in my face but I really need a clarity here.
I'm developing a project in React-Redux, and when I try to load the App it shows the error of the title.
I suspect that the error is in my App.js. There go below part of the code:
class App extends Component {
resetActiveIndexToZero = () => {
this.setState({ activeIndex: 0 })
}
componentDidMount() {
const { handleInitialData } = this.props
handleInitialData()
}
render() {
const { isAuthenticated } = this.props
return (
<BrowserRouter>
<Fragment>
<LoadingBar style={{ zIndex: 1000 }} />
{isAuthenticated && <Menu />}
<div className='ui main text container' style={{ marginTop: '7em' }}>
<Switch>
<Route path='/' exact component={RequiresAuth(QuestionList)} />
<Route path='/add' component={QuestionNew} />
<Route path='/login' component={Login} />
<Route path='/questions/:question_id' component={RequiresAuth(QuestionView)} />
<Route path='/leaderboard' component={RequiresAuth(Leaderboard)} />
<Route path='/logout' component={Logout} />
<Route path='/404' component={PageNotFound} />
</Switch>
</div>
<Footer />
</Fragment>
</BrowserRouter>
)
}
}
const mapStateToProps = (state) => {
const { authedUser } = state
return { isAuthenticated: authedUser !== null }
}
I've tried some things, without success.
What could be wrong with this code?
Any ideas?
Thanks in advance.
UPDATE 1
Here is the code of the archive RequiresAuth.js, as commented in an answer below:
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Redirect } from 'react-router'
export default function (ComposedComponent) {
class RequiresAuth extends React.Component {
static propTypes = {
isAuthenticated: PropTypes.bool
}
render() {
return (
<div>
{this.props.isAuthenticated ? <ComposedComponent {...this.props} />
: <Redirect to={{ pathname: '/login', state: { referrer: window.location.pathname}}} />}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
isAuthenticated: state.authedUser !== null
}
}
return connect(mapStateToProps)(RequiresAuth)
UPDATE 2
Here is the codesandbox: https://sit9d.csb.app/login