TypeError:Cannotreadproperty'url'ofundefined

引言

使用React-router感觉还是有一定「曲线」的,首先要熟悉ES6且不说,对于JSX扩展语法及React-router有关路由表达稍有马虎都不可以。当出现如题所示错误时,我在网络上搜索,竟然没有找到几处可参考的。倒是有一个如下:

10年积累的网站设计、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有昭化免费网站建设让你可以放心的选择与我们合作。

https://teamtreehouse.com/community/typeerror-cannot-read-property-url-of-undefined

的情况与我这里也不一样,后来在stackoverflow.com上直接搜索,也没有找到。不是受到前者的启发,还是终于把问题挖出来,欣喜之余,还是决定把它记录下来。

错误描述

import React, { Component } from 'react';
import {
    Link,
    Route,
} from 'react-router-dom';

const Home=()=>(

This is Home

) const Category=({match})=>{ return(
  • Shoes
  • Boots
  • Footwear
(

{match.params.name}

)} />
) } const Products=()=>(

This is Products

) class App extends Component{ render(){ return(
  • Home
  • Category
  • Products

) } } export default App;

本例是想测试React-Router客户端嵌套路由相关结论的。上面代码中定义了组件Category,问题出现在临近结尾处的此组件的引用方式。通过WebStorm内置控制台运行npm start时,出现下面语法错误提示:
TypeError: Cannot read property 'url' of undefined

纠错

正如前面所提及的,问题出在临近结尾处的Category组件的引用方式,正确的表达应该是:

                
                
                

小结

在React-Router的世界里一切皆是组件,可能是受到前段时间使用Semantic-UI for React中表达的影响,以至于犯下上面浮浅错误。其中,在React-Router中组件嵌套多少层是不要紧的,只要有需要,而且几乎不拘位置。React-Router初学者可以借鉴一下。


网站名称:TypeError:Cannotreadproperty'url'ofundefined
文章路径:http://pwwzsj.com/article/jishcd.html