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

【问题标题】：Access history with pages created through render()访问通过 render() 创建的页面的历史记录
【发布时间】：2020-11-04 14:04:23
【问题描述】：

我正在尝试在我的 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;

WelcomePage.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 道具，但这是为什么呢？我该如何解决我的问题？也许我的基本方法有缺陷，在这种情况下，我将不胜感激任何改进建议。谢谢。

【问题讨论】：

标签： reactjs react-native react-router react-router-native

【解决方案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;

【讨论】：