[英]React Router renders two components on the same page
我已經看過類似的其他問題,但似乎沒有一個能解決這個問題。
我想使用react路由器鏈接到另一個頁面。
這是我的組件的返回:
<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>
當url
匹配時,組件中的Route
將被ForgoPassword
組件替換,您應該在父組件中定義路由
例
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.