Javascript 无法读取未定义的privateroute的属性状态

我在网上找到了如何制作一条伪装的私人路线， 然而，我得到了一个错误

第12行“无法读取未定义的属性‘状态’” 我是个新手，我很难理解道具和这个

路由器.js

import React, { Component } from 'react';
import { Route, BrowserRouter, Redirect } from "react-router-dom";

import Login from './Authentication/Login';
import  Register  from './Authentication/Register';
import PageRouter from './page/PageRouter';
import Profile from './page/Profile';
import Rankings from './page/Rankings';
import Shop from './page/Shop';

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={
        (props) => (
      this.state
        ? <Component {...props} />
        : <Redirect to='/login' />
    )} />
  )


class Router extends Component{
    constructor(props){
        super(props);
        this.state = {
            login: false,
        }
    }

    render(){
        return(
            <div>
                <BrowserRouter>
                <Route exact path="/" component={ Register }></Route>
                    <Route path='/register' component={ Register }/>
                    <Route path="/login" component={ Login } />
                    <PrivateRoute path='/home' component={ PageRouter } />
                    <Route path ='/profile' component={ Profile } />
                    <Route path = '/rankings' component={ Rankings } />
                    <Route path = '/shop' component={ Shop }/>
                </BrowserRouter>          
            </div>
        );
    }
}

export default Router;

import React，{Component}来自'React'；
从“react router dom”导入{Route，BrowserRouter，Redirect}；
从“./Authentication/Login”导入登录名；
从“./Authentication/Register”导入寄存器；
从“./page/PageRouter”导入PageRouter；
从“./page/Profile”导入配置文件；
从“./页面/排名”导入排名；
从“./page/Shop”导入店铺；
const privaterout=（{component:component，…rest}）=>(
(
这个州
? 
: 
)} />
)
类路由器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
登录：false，
}
}
render（）{
返回(
);
}
}
导出默认路由器；

---

任何信息都会有帮助。谢谢

这不是问题。这里缺少的关键是理解JavaScript上下文。现在，

PrivateRoute

的词法范围是

全局

或

窗口

对象（或者如果处于严格模式

未定义

）。您当前在该对象上没有

状态

。如果您想要一种利用

路由器

类”状态的方法，那么我建议您通过

路由器

向

PrivateRoute

传递一些道具

因此，如果您想访问state上的

login

属性，请尝试以下操作：

然后你的

PrivateRoute

将有权访问一个名为

isLoggedIn

的

prop

，你可以在你的三元数据库中使用它。

第12行的“无法读取未定义的属性‘状态’”，我是一个新手，很难理解props与此相对应

Props（简单地说）是组件需要的一组属性，例如：

，其中

名称

和

地址

可以分别通过

this.Props.name

或

this.Props.address

访问

关键字

这是一个完全不同的概念<代码>这是指组件本身。这意味着，您可以访问组件类中定义的（组件）状态、道具或方法

我不知道这是否与您的问题有关，但我注意到您的示例代码来自教程（）

下面是我对

privaterout

的实现：

const PrivateRoute = ({ component: Component, ...rest }: {component: any}) => (
    <Route {...rest} render={(props) => (
        fakeAuth.isAuthenticated === true
            ? <Component {...props} />
            : <Redirect to={{
                pathname: '/login',
                state: { from: props.location }
            }} />
    )} />
)

PrivateRoute.propTypes = {
    component: PropTypes.any,
    location: PropTypes.string,
    path: PropTypes.string
};

const PrivateRoute=（{component:component，…rest}:{component:any}）=>(
(
fakeAuth.isAuthenticated==true
? 
: 
)} />
)
PrivateRoute.propTypes={
组件：PropTypes.any，
位置：PropTypes.string，
路径：PropTypes.string
};

---

state

属性不是

this.state

。它是

react router dom

的

Redirect

中的一个参数，这是否回答了您的问题？关于react、组件状态、fat arrow函数和未定义的

这方面，有很多很多堆栈溢出问题。您研究并尝试使用其中的哪一个来解决您的问题，以及为什么它们不适用于您？使用此。setState（）您需要使用基于lcass的组件：
类PrivateRoute扩展了React.component
我认为您将
这个.state
的概念与
state
属性混合在一起，这些属性是'React-router-dom'的
重定向
组件的一个参数。这是否回答了您的问题？唯一的问题是它不会再次运行render（），即使我的状态为change，因此会一直停留在state:false