2017-06-13 7 views
1

Ich versuche, einen einfachen Link in Reaktion zu erstellen. hier ist der Code:React-Router Link funktioniert nicht

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; 

Hier mein package.json ist:

"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" 

ich Befehl nach meinem Code auszuführen:

webpack-dev-Server

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 

wenn ich entferne

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

von meinem Code dann lädt die Seite richtig. Verwende ich die alte Methode zum Erstellen von Link auf einer Komponente?

Irgendwelche Hinweise sind willkommen ...

Antwort

1

Sie müssen Link von react-router-dom importieren, können Sie das Beispiel überprüfen here. Es gibt auch keine Notwendigkeit, Klammern zu verwenden, Sie können einfach tun: <Link to="/react">React</Link>.

5

Link ist jetzt Teil des Pakets react-router-dom. so sollten Sie Ihren Import zu ändern:

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