首页 文章

React Native with Router v4匹配标记,给出组件未定义

提问于
浏览
0

我正在尝试使用反应路由器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 回答

  • 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 .

相关问题