РЕАГИРОВАТЬ, получая «TypeError: Невозможно прочитать свойство 'props' of undefined" при перенаправлении через корыто кнопку Onclick

Question

Я новичок в реакции, пытаюсь заставить мое приложение менять экраны по нажатию кнопки. Я просмотрел множество постов здесь в стеке, но безрезультатно.

Мой код:

import React from 'react';
import {BrowserRouter, Route, useHistory } from 'react-router-dom' 
import {StyleSheet, Text, View} from 'react-native';
import {Card, Header, Button} from 'react-native-elements';  

import AddNews from './AddNews';

export default class App extends React.Component{

  onClick(){
    this.props.router.push("/addnews");
  }

   render(){
     return(

       <BrowserRouter>
       <Route exact path='/addnews' component={AddNews}/> 
       </BrowserRouter>

       <View>

         <Button title= "stlac" color = 'red' onClick={this.onClick.bind(this)}></>

       </View>
    );
  }
}

Я пробовал разные подходы, используя withRouter, browserHistory, useHistory, почти все, что я мог найти здесь, но каждая опция вызвала ту же ошибку. Ошибка происходит в функциях onClick, поэтому, я думаю, я не передаю правильное «this», но понятия не имею, как его изменить или что делать.

Спасибо, Лукас

РЕДАКТИРОВАТЬ: обновить после использования функции стрелки: пустые реквизиты

РЕДАКТИРОВАТЬ2: Ответ скрыт в комментариях.

Answer 1

Преобразуйте onClick в функцию стрелки , это сделает this вашим экземпляром компонента приложения:

  onClick = () => {
    this.props.router.push("/addnews");
  }