时间戳

首页 > 解决方案 > React Router Native(4.3.0) Url Params 中断应用程序

javascript - React Router Native(4.3.0) Url Params 中断应用程序

问题描述

我有一个 React Native 项目，我正在使用 react-router-native 版本 4.3.0。

<Provider store={store}>
      <NativeRouter>
        <Base user={this.state.user} >
          <View style={styles.container}>
            <Route exact path="/" component={Splashstart}/>
            <Route exact path="/profile" component={Profile}/>
            <Route exact path="/report/:id" component={Report}/>
          </View>
        </Base>
      </NativeRouter>
    </Provider>

我已经将我的应用程序包装在一个基本组件中，该组件基本上决定它是否需要显示导航，如果有一个用户。

render() {
if(this.props.user) {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        {this.props.children}
      </View>
      <Nav />
    </SafeAreaView>
  );
} else {
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        {this.props.children}
      </View>
    </View>
  );
}

}

当我点击报告路线时，导航变得无用，我被困在页面中。它似乎破坏了我的路线。

如果它在 url (:id) 上有一个参数，它可以是任何路由。我尝试只渲染一段文本，但它仍然发生 - 所以我认为它不是页面中的任何内容。

我<Nav />在基础中的组件在每次页面刷新时都会重新渲染，基础也是如此，我希望基础也随着孩子的变化而变化，但导航不应该保留吗？

this.state.user 在传递给基础组件时不会改变。

任何帮助都是史诗般的！

干杯

标签： javascriptreactjsreact-nativereact-routerreact-router-v4

解决方案

我认为该Route组件有一个错字：额外的extract道具。

<Route exact path="/report/:id" component={Report}/>

推荐阅读