Блог

Я использую React JS и маршрутизатор React.

У меня есть 2 класса:

1. App.js
2. SomeClass.js

в App.js:

 class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            token: "",
            auth: false
        };
    }
    
    
    
    
    render(){

        return(
            <Router>
              
                <Switch>
                    <Route exact path="/anotherendpoint" component={() => <SomeOtherComponent auth={this.state.auth} token={this.state.token} />} />
                    <Route path="/someendpoint/abc" exact component={() => <SomeClass auth={this.state.auth} token={this.state.token} />} />
                </Switch>
            </Router>
            );
    }
    
}


export default App;
 

В SomeClass.js:

 class SomeClass extends React.Component{
    constructor(props){
        super(props);
    }
    
    
    logout = () =>{
        console.log('token: ', this.props.token);   //getting token: undefined
        let myCookie = document.cookie;
        console.log("cookie: ", myCookie);      //getting cookie: undefined
    }


}

export default Nav;
 

В классе SomeClass всякий раз, когда я делаю это.props.token, я получаю неопределенное

Также, когда я console.log(document.cookie), я получаю неопределенное

Проблема возникает только в компоненте SomeClass. В чем причина этого ?

Почему реквизит не определен.

Спасибо.

Вы неправильно передаете реквизит компоненту. Просто добавьте реквизит в компонент, подобный этому:

 component={() => <SomeComponent auth={this.state.auth} token={this.state.token} />}
 

Попробуйте этот подход.

вы можете узнать больше здесь

https://reactrouter.com/web/example/basic

     <Router>
      <Switch>
        <Route path="/teste" exact>
          <SomeOtherComponent auth="AUTH PROP" token="FAKE_TOKEN_PROP" />
        </Route>
      </Switch>
    </Router>