react router version 4 not rendering anything

问题:

I checked [here][1] and [here][2] but it dint help me. I am using react-router version 4 and when I tried to run console also not showing anything nor my page. please help me out here I put one console that is also not printing anything means my headerContainer it self it not being rendered here is my 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')
);

my HeaderContainer

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

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

and my 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

UPDATE 1: I edited my index.js like this way

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

Now m getting error like this

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 now I finally changed my index.js like this way

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')
);

and my HeaderContainer like this

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

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

Now I back to same position no error no rendering..:(

回答1:

You need to import Link from react-router-dom in your Navbar component like

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

as Link is being moved to the react-router-dom package from v4 onwards. See the docs

Also make sure to install react-router-dom before that using

npm install -S react-router-dom

and you are importing Dashboard as a named export from HeaderContainer component but it doesn't contain any named export called Dashboard.

I think you need to change it to

import Dashboard from "./containers/HeaderContainer"