反应路由器版本4没有渲染任何东西

Question

我检查了[这里] [1]和[这里] [2]但它帮助我。我正在使用react-router版本4，当我试图运行控制台也没有显示任何东西，也没有我的网页。请帮我在这里，我把一个控制台也没有任何印刷手段我headerContainer它的自我它没有被渲染 这里是我的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/> 
     ) 
    } 
} 

和我的导航栏

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 

更新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 

现在m到处错误这样

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) 

编辑2： 确定现在我改变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') 
); 

和我HeaderContainer这样

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

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

现在我回到相同的位置没有错误没有渲染.. :(

Answer 1

您需要在您的导航栏组件从react-router-dom导入Link像

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

为Link被移动到react-router-dom包从V4开始。 见docs

另外，还要确保在此之前，要安装使用react-router-dom

npm install -S react-router-dom 

，并要导入Dashboard从HeaderContainer组件命名的出口，但它不包含任何命名出口称为仪表盘。

我认为你需要将其更改为

import Dashboard from "./containers/HeaderContainer"