React Router Native(4.3.0)网址参数中断应用

时间:2018-09-17 22:24:57

标签: javascript reactjs react-native react-router react-router-v4

我有一个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>

我已经将我的应用程序包装在一个Base组件中,该组件基本上决定了是否需要显示Nav(是否有一个User)。

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 />组件在每页刷新时都会重新显示,就像我希望的那样,随着子级的变化,我的(@:version)组件也会重新出现,但是Nav是否不应该保留?

this.state.user传递给基本组件时不变。

任何帮助都是史诗般的!

欢呼

1 个答案:

答案 0 :(得分:0)

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

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