反応ルータバージョン4は何もレンダリングしていません

Question

[ここ] [1]と[ここ] [2]にチェックしましたが、助けになります。私は反応ルータのバージョン4を使用していて、何か、私のページも表示していないコンソールを実行しようとしました。私を助けてください、ここで私はそれは自己それがここ をレンダリングされていないが、私のindex.js

import ReactDOM from 'react-dom'; 
import React from 'react'; 

import { Provider } from 'react-redux'; 
import configureStore from './stores/configureStores'; 
import {BrowserRouter,Route,Switch} from 'react-router-dom' 
import{ Dashboard} from "./containers/HeaderContainer" 

const store = configureStore(); 

ReactDOM.render(
    <Provider store={store}> 
    <BrowserRouter > 
     <Switch> 
     <Route exact path="/" component={Dashboard}/> 
     </Switch> 
    </BrowserRouter> 
    </Provider>, document.getElementById('root') 
); 

私HeaderContainer

import React from "react" 
import NavBar from "../components/Header/NavBar" 

export default class HeaderContainer extends React.Component{ 
    render(){ 
     console.log("hello") 
     return(
      <NavBar/> 
     ) 
    } 
} 

と私のナビゲーションバーでも、何も印刷されていませんが、私のheaderContainerを意味し、1つのコンソールを置きます

import React from "react" 
import Link from "react-router" 

const navBar = ({props}) => (
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <Link to="/"> 
        <img alt="snapstrat logo" src="../../../assets/images/Final_Badge.png"/> 
       </Link> 
      </div> 
      <div class="navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <Link to="/">DASHBOARD</Link> 
        </li> 
        <li> 
         <div class="dropdown"> 
          <button class="dropbtn">PRO</button> 
          <div class="dropdown-content"></div> 
         </div> 
        </li> 
        <li> 
         <div class="dropdown"> 
          <button class="dropbtn">PLA</button> 
          <div class="dropdown-content"></div> 
         </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
) 
export default navBar 

UPDATE 1： 私はこの方法のように私のindex.jsを編集し

import HeaderContainer from "./containers/HeaderContainer" 

const store = configureStore(); 

ReactDOM.render(
    <Provider store={store}> 
    <BrowserRouter > 
     <Switch> 
     <Route exact path="/" component={HeaderContainer}/> 
     </Switch> 
    </BrowserRouter> 
    </Provider>, document.getElementById('root') 
); 


    [1]: https://stackoverflow.com/questions/44368538/react-router-v4-not-rendering-anything-when-files-separated 
    [2]: https://stackoverflow.com/questions/44666170/react-router-version-4-not-showing-anything 

今、この

warning.js:35 Warning: Unknown DOM property class. Did you mean className? 
    in nav (created by NavBar) 
    in NavBar (created by HeaderContainer) 
    in HeaderContainer (created by Route) 
    in Route 
    in Switch 
    in Router (created by BrowserRouter) 
    in BrowserRouter 
    in Provider 

invariant.js:44 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 eval (ReactChildReconciler.js:71) 
    at traverseAllChildrenImpl (traverseAllChildren.js:77) 
    at traverseAllChildren (traverseAllChildren.js:172) 
    at Object.instantiateChildren (ReactChildReconciler.js:70) 
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:185) 
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:224) 
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703) 

EDIT 2のようなエラーを取得メートル： OK今、私は最終的にこのよう

import {HeaderContainer} from "./containers/HeaderContainer" 

const store = configureStore(); 

ReactDOM.render(
    <Provider store={store}> 
    <BrowserRouter > 
     <Switch> 
     <Route exact path="/" component={HeaderContainer}/> 
     </Switch> 
    </BrowserRouter> 
    </Provider>, document.getElementById('root') 
); 

この

のように私のHeaderContainerように私のindex.jsを変更

import {NavBar} from "../components/Header/NavBar" 

export default class HeaderContainer extends React.Component{ 
    render(){ 
     console.log("hello") 
     return(
      <NavBar/> 
     ) 

今私は同じ位置にエラーなしレンダリング.. :(

Answer 1

あなたが以降V4からreact-router-domパッケージに移動されているLinkとして

import {Link} from "react-router-dom" 

のようなあなたのナビゲーションバーコンポーネントにreact-router-domからLinkをインポートする必要があります。 docs

はまた

npm install -S react-router-dom 

を使用して、その前react-router-domをインストールしてください、あなたはHeaderContainerコンポーネントから名前のエクスポートとしてDashboardをインポートしているが、それはダッシュボードと呼ばれる任意の名前の輸出が含まれていません参照してください。

私はあなたが

import Dashboard from "./containers/HeaderContainer"