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

Question

我检查了 [here][1] 和 [here][2] 但它对我没有帮助。我正在使用 react-router 版本 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/>
        )
    }
}

还有我的导航栏

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

现在我遇到这样的错误

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 从 v4 开始移至 react-router-dom 包。 见docs

还要确保在使用之前安装react-router-dom

npm install -S react-router-dom

您正在将 Dashboard 作为来自 HeaderContainer 组件的命名导出导入，但它不包含任何名为 Dashboard 的命名导出。

我认为您需要将其更改为

import Dashboard from "./containers/HeaderContainer"