阵营本地与路由器V4比对标记给人成分不确定

Question

我尝试了反应路由器本地基于此link

的Match标签反应路由器V4是给我一个错误

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，{Component}; 进口{ AppRegistry， 样式表 文本， 视图， 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); 

Answer 1

在react-router最终版本没有Match也不Miss。你只需要使用Route。在你的情况，你需要做到以下几点：

<View style={styles.routeContainer}> 
    <Switch> 
     <Route exact path="/" component={componentFactory('Home')}/> 
     <Route path="/about" component={componentFactory('About')}/> 
     <Route path="/topics" component={componentFactory('Topics')}/> 
     <Route component={componentFactory('Nope, nothing here')}/> 
    </Switch> 
</View> 

详见NoMatchExample in React Router docs。