陣營本地與路由器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。