reactjs - React Router 在同一页面上渲染两个组件

Question

我已经查看了与此类似的其他问题，但似乎都没有解决这个问题。

我想使用反应路由器链接到另一个页面。

这是我的组件的回报：

          <NativeRouter>
            <View style={styles.container}>
                <TextInput
                    onChangeText={value => this.onChangeText('username', value)}
                    style={styles.input}
                    placeholder='username'
                />
                <TextInput
                    onChangeText={value => this.onChangeText('password', value)}
                    style={styles.input}
                    secureTextEntry={true}
                    placeholder='password'
                />
                <Button style={styles.button} title="Sign In" onPress={this.signIn.bind(this)} />
                <TextInput
                    onChangeText={value => this.onChangeText('confirmationCode', value)}
                    style={styles.input}
                    placeholder='Confirmation Code'
                />
                <Button style={styles.button} title="Confirm Sign In" onPress={this.confirmSignIn.bind(this)} />

                <Link to='/forgotPassword'>
                    <Text>Forgot Password</Text>
                </Link>
                <Switch>
                    <Route path='/forgotPassword' component={ForgotPassword} />
                </Switch>
            </View>
          </NativeRouter>

每当我单击该链接时，该链接都会在同一页面上呈现 ForgotPassword 组件。

想法？

这是在我的 app.js 中。

        <Switch>
          <Route path="/signin" component={SignIn} />
          <Route path="/forgotPassword" component={ForgotPassword} />
        </Switch>
        </View>

标签： reactjsreact-nativereact-router

Answer 1

当匹配时，您的组件内部将被替换为组件，您应该在父组件中定义Route路由ForgoPasswordurl

例子

import React from "react";
import { StyleSheet, Text, View, AppRegistry } from "react-native";
import { NativeRouter, Route, Link } from "react-router-native";

const Home = () => <Text style={styles.header}>Home</Text>;
const SignIn = () => <Text style={styles.header}>SignIn</Text>;
const ForgotPassword = () => <Text style={styles.header}>ForgotPassword</Text>;

const App = () => (
  <NativeRouter>
    <View style={styles.container}>
      <View style={styles.nav}>
        <Link to="/" underlayColor="#f0f4f7" style={styles.navItem}>
          <Text>Home</Text>
        </Link>
        <Link to="/signIn" underlayColor="#f0f4f7" style={styles.navItem}>
          <Text>Sign In</Text>
        </Link>
        <Link
          to="/forgotPassword"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>Forgot Password</Text>
        </Link>
      </View>

      <Route exact path="/" component={Home} />
      <Route path="/signIn" component={SignIn} />
      <Route path="/forgotPassword" component={ForgotPassword} />
    </View>
  </NativeRouter>
);

const styles = StyleSheet.create({
  container: {
    marginTop: 25,
    padding: 10
  },
  header: {
    fontSize: 20
  },
  nav: {
    flexDirection: "row",
    justifyContent: "space-around"
  },
  navItem: {
    flex: 1,
    alignItems: "center",
    padding: 10
  },
  subNavItem: {
    padding: 5
  },
  topic: {
    textAlign: "center",
    fontSize: 15
  }
});

AppRegistry.registerComponent("MyApp", () => App);

沙盒