无法读取未定义的属性“历史”-React Router

Question

我正在尝试从SignIn组件链接到ForgotPassword组件。

这是我的登录的基本设计：

import React, { Component } from 'react';
import { TextInput, Button, StyleSheet, Text, View } from 'react-native'
import { NativeRouter, withRouter, Switch, Route, Link } from 'react-router-native'
import ForgotPassword from './ForgotPassword'

import { Auth } from 'aws-amplify'

class SignIn extends Component {

    render() {

        return(

                <View style={styles.container}>
                    <TextInput
                        onChangeText={value => this.onChangeText('username', value)}
                        style={styles.input}
                        placeholder='username'
                    />
                    <TextInput
                        onChangeText={value => this.onChangeText('password', value)}
                        style={styles.input}
                        secureTextEntry={true}
                        placeholder='password'
                    />
                    <Button style={styles.button} title="Sign In" onPress={this.signIn.bind(this)} />
                    <TextInput
                        onChangeText={value => this.onChangeText('confirmationCode', value)}
                        style={styles.input}
                        placeholder='Confirmation Code'
                    />
                    <Button style={styles.button} title="Confirm Sign In" onPress={this.confirmSignIn.bind(this)} />

                    <Link to="/forgotPassword"><Text>Forgot password</Text></Link>


                </View>


        )
    }
}

export default SignIn

我在Routes.js中配置了我的React路由器的所有路由：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { NativeRouter, Switch, Route } from 'react-router-native'
import ForgotPassword from './ForgotPassword'
import SignIn from './SignIn'
import MainPage from './MainPage'


export default class Routes extends Component {
  render() {
    return (
      <NativeRouter>
        <View >
          <Switch>
            <Route  exact path="/forgotPassword" component={ForgotPassword} />
            <Route  exact path="/signin" component={SignIn} />
          </Switch>
        </View>
      </NativeRouter>
    );
  }
}

然后我将Routes.js组件导入到App.js组件中：

const store = createStore(reducers, applyMiddleware(thunk))

type Props = {};
export default class App extends Component<Props> {
  render() {

    if(this.state.isAuthenticated) {
      console.log('auth:', Auth)
      return (
        <Provider store={store}>
          <View style={{position: 'relative'}}>
              <Search logOut={this.logOut} />
              <LeagueSelect />
              <Card />
          </View>
        </Provider>
      )
    }

    return (
        <View style={styles.container}>
          <Tabs
            screenProps={{
              authenticate: this.authenticate.bind(this)
            }}
          />
          <Routes />
        </View>
    )
  }
}


})

在此方面的任何帮助将不胜感激。我整天都被困住了。

最终目标是能够从SignIn链接到ForgotPassword，而不是将SignIn组件保留在页面上，而只具有ForgotPassword组件。