使用通过render()创建的页面访问历史记录

Question

我正试图在我的React Native应用程序中实现一个多语言选项。我正在使用react-router导航页面。我尝试的方法包括将当前区域设置作为道具传递给组件。

App.js

import React from 'react';
import {NativeRouter, Switch, Route} from 'react-router-native'
import WelcomePage from './components/WelcomePage'
import TestPage from './components/TestPage'
let lang = 'en'
const Main = () => {
return (
<NativeRouter>
<Switch>

<Route exact path="/" render ={() => <WelcomePage lang={lang}/>}/>            
<Route exact path="/testpage" render{() => <TestPage lang={lang}/>}/>
</Switch>
</NativeRouter>
)
}
export default Main;

欢迎页面.js

import React from 'react'
import {Text, View, Button} from 'react-native' 

const WelcomePage = ({history, lang}) => {
return (
<View>
<View>
<Text>Current language: {lang}</Text>   
{// works so far}
</View>
<View>
<Button title="Change view" onPress={() => history.push("/testpage")}/>
{//crashes here, assumably because it doesn't get the history prop through the render() function}
</View>
</View>
)
}

export default WelcomePage

这似乎在大多数情况下都有效，但在history.push()上崩溃，并显示错误消息

undefined is not an object (evaluating 'history.push')

由此看来，在这种情况下，很明显不可能访问history道具，但为什么呢？我该如何解决我的问题？也许我的基本方法有缺陷，在这种情况下，如果有任何改进建议，我将不胜感激。非常感谢。

Answer 1

您是否尝试将历史记录函数作为道具从父级传递？像这样：

const Main = () => {
const history = {
push: (route) => {
...use navigator to change page
}
}
return (
<NativeRouter>
<Switch>

<Route exact path="/" render ={() => <WelcomePage history={history} lang={lang}/>}/>            
<Route exact path="/testpage" render{() => <TestPage lang={lang}/>}/>
</Switch>
</NativeRouter>
)
}
export default Main;