Javascript 为什么自定义保护路由器不能呈现组件？

我有几个组件来保护身份验证。然后我制作了一个名为

ProtectedRoute

的新组件。在这个

ProtectedRoute

函数中，我只捕获抛出的属性，但不知何故，我只从

React Context

获取状态，并且我发送的道具在

console.log（）

中是未定义的

ProtectedRoute.js：

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { withAuth } from './Context/AuthContext'

function ProtectedRoute(props) {

    const {component: Component, ...rest} = props
    console.log(Component)
        return(
            props.isLoggedIn ? <Route {...rest} component={Component} /> : <Redirect push to="/" />
        )

    }

export default withAuth(ProtectedRoute)

从“React”导入React
从“react router dom”导入{Route，Redirect}
从“./Context/AuthContext”导入{withAuth}
功能保护路线（道具）{
常量{component:component，…rest}=props
console.log（组件）
返回(
道具。伊斯洛格丁？：
)
}
使用Auth导出默认值（ProtectedRoute）

App.js：

render() {
        return (
            <BrowserRouter>
                <AuthContextProvider>
                        <Switch>
                            <Route exact path="/" component={Login} />
                            <ProtectedRoute path="/portal" component={Main} />
                        </Switch>
                </AuthContextProvider>
            </BrowserRouter>
        )
    }

render（）{
返回(
)
}

顺便说一句，我已经导入了所有必需的组件，但是如果我通过

react router

将

ProtectedRoute

更改为normal

，它可以呈现组件

Main

---

我的代码有问题吗？

请尝试返回props.isLoggedIn:}/>isLoggedIn:true login:cridentials=>{…}logout:（）=>{…}token:“myJWTtoken”用户：{myUserInfo}您能提供一个工作的JSFIDLE吗？weedoze的第一条评论应该适合您。