2017-06-13 132 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';