反应路由器版本4没有渲染任何东西
问题描述:
我检查了[这里] [1]和[这里] [2]但它帮助我。我正在使用react-router版本4,当我试图运行控制台也没有显示任何东西,也没有我的网页。请帮我在这里,我把一个控制台也没有任何印刷手段我headerContainer它的自我它没有被渲染 这里是我的index.js反应路由器版本4没有渲染任何东西
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://*.com/questions/44368538/react-router-v4-not-rendering-anything-when-files-separated
[2]: https://*.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/>
)
现在我回到相同的位置没有错误没有渲染.. :(
答
您需要在您的导航栏组件从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"
'warning.js:35警告:未知的DOM属性类。你的意思是className?' - 无效的jsx,修复你的NavBar组件。 –
雅完成,但仍然是相同的错误 – LowCool
老兄,您的导航栏充满'class =“'引用。class是js中的保留关键字 - 您需要使用'className'。 –