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/>
        )
    }
}

和我的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

您需要从导航栏组件中的Link导入react-router-dom，例如

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不呈现任何东西

1 个答案: