2017-06-13 131 views
1

我正在嘗試在反應中創建一個簡單的鏈接。這裏是代碼:react-router鏈接無法正常工作

import React from 'react'; 
import { Link } from 'react-router'; 
class List extends React.Component{ 
    render() { 
     return (
     <div> 
     <p>please choose from repository below.</p> 
     <ul> 
      <li><Link to={"/react"}>React</Link></li> 
     </ul> 
     </div> 
     ); 
    } 
} 

export default List; 

這裏是我的package.json:

"dependencies": { 
    "chance": "^1.0.9", 
    "history": "^4.6.1", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-router": "^4.1.1", 
    "react-router-dom": "^4.1.1", 
    "superagent": "^3.5.2" 

我用下面的命令來運行我的代碼:

的WebPack-DEV-服務器

bundle.js:1004 Warning: 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 `List`. 
    in List (created by Route) 
    in Route 
    in div 
    in Router (created by HashRouter) 
    in HashRouter 

如果我刪除

<li><Link to={"/react"}>React</Link></li> 

從我的代碼然後頁面加載正常。我是否使用在組件上創建鏈接的舊方法?

任何提示的讚賞...

回答

1

你需要從react-router-dom導入Link,你可以檢查例子here。此外不需要使用括號,您可以簡單地執行:<Link to="/react">React</Link>

5

鏈接現在是react-router-dom軟件包的一部分。 所以你應該改變你的進口到:

import { Link } from 'react-router-dom';