Question

我正在制作一个react-router的网络应用，其导航类似于移动堆栈导航。页面的内容应该包含在NavigationScreen对象中（控制侧栏，导航栏和作品）：

class HomeScreen extends React.Component {
  render() {
    return (
       <NavigationScreen>
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
           <Text>Home Screen</Text>
           <Link to='/details'>details</Link>
        </View>
       </NavigationScreen>
    );
  }
}

路线是这样的：

export default class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
          <Route exact path='/' component={HomeScreen} />
          <Route path='/details' component={DetailsScreen} />
        </View>
      </BrowserRouter>
    );
  }
}

但我认为我在计划中犯了一个错误。我希望导航栏有一个＆＃34;后退按钮＆＃34;，它应该通过调用this.props.history.goBack来工作。问题是HomeScreen类接收此道具，而不是NavigationScreen。我能看到的唯一解决办法是通过一个相当尴尬的道具：

class HomeScreen extends React.Component {
  render() {
    return (
       <NavigationScreen history=this.props.history>
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
           <Text>Home Screen</Text>
           <Link to='/details'>details</Link>
        </View>
       </NavigationScreen>
    );
  }
}

IMO看起来很糟糕，还有更好的方法吗？

Answer 1

如果您不想将NavigationScreen作为道具传递，则可能需要在history上使用withRouter HOC。

隐含地传递路由器历史记录

1 个答案: