React Router v4 navbar in separate Datei verschieben

Question

Ich versuche gerade meine Navbar von der ReactDOM.render() Funktion zu trennen, indem ich den react Router v4 verwende. Aber wie kann ich eine Navbar mit dem neuen react router v4 und einer Link-Komponente in eine separate Datei verschieben?

Mein Ausgangspunkt der Applikation client.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { BrowserRouter as Router, Route, Link} from 'react-router-dom'; 

import store from './store'; 

import NavBar from './components/NavBar.react'; 
import WelcomePage from './components/Pages/Welcome.react'; 
import LoginPage from './components/Pages/Login.react'; 

const app = document.getElementById('app'); 

ReactDOM.render(
    <Provider store={store}> 
     <Router> 
     <div> 
      <NavBar /> 

      <Route exact path="/" component={WelcomePage} /> 
      <Route path="/login" component={LoginPage} /> 
     </div> 
     </Router> 
    </Provider>, app); 

My getrennte navbar Datei NavBar.react.js:

import React from "react"; 
import { connect } from "react-redux"; 
import { Link } from 'react-router'; 

export default class NavBar extends React.Component { 
    render() { 
    return (
     <div> 
     <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/login">Login</Link></li> 
     </ul> 

     <hr/> 
     </div> 
    ) 
    } 
} 

diesen Code Lauf wirft mir den folgenden Fehler:

Uncaught Error: Element 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 `NavBar`. 
at invariant (invariant.js:44) 
at instantiateReactComponent (instantiateReactComponent.js:74) 
at instantiateChild (ReactChildReconciler.js:44) 
at ReactChildReconciler.js:71 
at traverseAllChildrenImpl (traverseAllChildren.js:77) 
at traverseAllChildren (traverseAllChildren.js:172) 
at Object.instantiateChildren (ReactChildReconciler.js:70) 
at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187) 
at ReactDOMComponent.mountChildren (ReactMultiChild.js:226) 
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697) 

Wenn ich Entferne die Zeile <NavBar /> oder bewege den JSX Inhalt meiner NavBar zu der client.js Datei, es funktioniert ...

Bis jetzt habe ich nur einige Beispiele im Internet gefunden, wo Leute ihre Navbar in die ReactDOM.render() - Funktion integriert haben.

Answer 1

Sie importieren Link von 'react'router' in Ihrer Navbar-Komponente. Dies funktioniert, wenn Sie sowohl "react-router" als auch "react-router-dom" installiert haben, aber was Sie wahrscheinlich tun möchten, ist nur import { Link } from 'react-router-dom';, denn es sieht so aus, als ob Sie bereits react-router-dom installiert haben.