反应路由器版本 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]: 
  [2]:

现在我遇到这样的错误

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"

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

react router version 4 not rendering anything

javascript

reactjs

react-router-v4

react-router-dom