は未定義

Question

はで、ルータのネイティブを反応させ、私が試したコンポーネントを与えるルータv4のマッチタグを持つネイティブリアクト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

私にエラーを与えている。このlink

に基づいて、ルータV4を反応させますコンポーネントが利用可能であり、私は明示的にコンポーネントを作成しようとしました。

フルコード インポート 'React'から{Component}をインポートします。 インポート{AppRegistry、 スタイルシート、 テキスト、 ビュー、 TouchableHighlight、 }反応ネイティブ 'から。 'react-router'からimport {Match、Miss、RouterとしてのMemoryRouter}を実行します。 react-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

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を参照してください。