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>

Answer 1

Route внутри вашего компонента будет заменено на ForgoPassword компонент, когда url совпадает. Вы должны определить маршруты в родительском компоненте

Пример

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);

песочница