我正在尝试使用反应路由器v4反应路由器本机基于此link
Match
标签给我一个错误
React.createElement: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in. Check the render method of
这些组件是可用的,我甚至尝试过显式创建组件 .
完整代码导入React,来自'react'的;从'react-native'导入{AppRegistry,StyleSheet,Text,View,TouchableHighlight,};从'react-router'导入{Match,Miss,MemoryRouter as Router};
const componentFactory = (routeName) => () => (
<View>
<Text style={styles.route}>{routeName}</Text>
</View>
)
const NavLink = ({to, children}, context) => {
const pressHandler = () => context.router.transitionTo(to);
return (
<TouchableHighlight onPress={pressHandler}>
{children}
</TouchableHighlight>
)
}
NavLink.contextTypes = {router: React.PropTypes.object}
export default class RR4Native extends Component {
render() {
return (
<Router>
<View style={styles.container}>
<View style={styles.routeContainer}>
<Match exactly pattern="/" component={componentFactory('Home')}/>
<Match pattern="/about" component={componentFactory('About')}/>
<Match pattern="/topics" component={componentFactory('Topics')}/>
<Miss component={componentFactory('Nope, nothing here')}/>
</View>
<View style={styles.container}>
<NavLink to="/">
<Text style={styles.routeLink}>
Home
</Text>
</NavLink>
<NavLink to="/about">
<Text style={styles.routeLink}>
About
</Text>
</NavLink>
<NavLink to="/topics">
<Text style={styles.routeLink}>
Topics
</Text>
</NavLink>
<NavLink to="/broken">
<Text style={styles.routeLink}>
Broken
</Text>
</NavLink>
</View>
</View>
</Router>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
route: {
color: '#701010',
fontSize: 40
},
routeLink: {
color: '#0000FF'
},
routeContainer: {
flex: 1,
justifyContent: 'center'
}
});
AppRegistry.registerComponent('RR4Native', () => RR4Native);
1 回答
在
react-router
的最终版本中,没有Match
也没有Miss
. 你只需要使用Route
. 在您的情况下,您需要执行以下操作:有关详细信息,请参阅NoMatchExample in React Router docs .