反应路由器版本 4 不渲染任何东西 [英] react router version 4 not rendering anything

查看：60
本文介绍了反应路由器版本 4 不渲染任何东西的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我检查了 [here][1] 和 [here][2]，但它对我没有帮助.我使用的是 react-router 版本 4，当我尝试运行控制台时，也没有显示任何内容，也没有显示我的页面.请帮帮我我放了一个控制台也没有打印任何东西意味着我的 headerContainer 它自己没有被渲染这是我的 index.js

从'react-dom'导入ReactDOM；从反应"导入反应；从'react-redux'导入{提供者}；从 './stores/configureStores' 导入 configureStore；从react-router-dom"导入 {BrowserRouter,Route,Switch}从./containers/HeaderContainer"导入{仪表板}const store = configureStore();ReactDOM.render(<提供者商店={商店}><浏览器路由器><开关><路由精确路径="/" component={Dashboard}/></开关></BrowserRouter></Provider>, document.getElementById('root'));

我的 HeaderContainer

从react"导入 React从../components/Header/NavBar"导入导航栏导出默认类 HeaderContainer 扩展 React.Component{使成为(){console.log("你好")返回(<导航栏/>)}}

和我的导航栏

从react"导入 React从反应路由器"导入链接const navBar = ({props}) =>(<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="容器"><div class="navbar-header"><链接到="/"><img alt="snapstrat logo" src="../../../assets/images/Final_Badge.png"/></链接>

<div class="navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><Link to="/">DASHBOARD</Link><li><div class="下拉菜单"><button class="dropbtn">PRO</button><div class="dropdown-content"></div>

<li><div class="下拉菜单"><button class="dropbtn">PLA</button><div class="dropdown-content"></div>

</nav>)导出默认导航栏

更新1:我这样编辑我的 index.js

从./containers/HeaderContainer"导入HeaderContainerconst store = configureStore();ReactDOM.render(<提供者商店={商店}><浏览器路由器><开关><路由精确路径="/" component={HeaderContainer}/></开关></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 警告:未知 DOM 属性类.你是说 className 吗?在导航中(由 NavBar 创建)在导航栏中(由 HeaderContainer 创建)在 HeaderContainer(由 Route 创建)在路线在开关在路由器中(由 BrowserRouter 创建)在浏览器路由器中在提供者中invariant.js:44 未捕获的错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件.检查NavBar"的渲染方法.在不变 (invariant.js:44)在 instantiateReactComponent (instantiateReactComponent.js:74)在 instanceiateChild (ReactChildReconciler.js:44)在 eval (ReactChildReconciler.js:71)在 traverseAllChildrenImpl (traverseAllChildren.js:77)在 traverseAllChildren (traverseAllChildren.js:172)在 Object.instantiateChildren (ReactChildReconciler.js:70)在 ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:185)在 ReactDOMComponent.mountChildren (ReactMultiChild.js:224)在 ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)

编辑 2:好的现在我终于像这样改变了我的 index.js

从./containers/HeaderContainer"导入 {HeaderContainer}const store = configureStore();ReactDOM.render(<提供者商店={商店}><浏览器路由器><开关><路由精确路径="/" component={HeaderContainer}/></开关></BrowserRouter></Provider>, document.getElementById('root'));

和我的 HeaderContainer 这样

从../components/Header/NavBar"导入{NavBar}导出默认类 HeaderContainer 扩展 React.Component{使成为(){console.log("你好")返回(<导航栏/>)

现在我回到相同的位置没有错误没有渲染..:(

解决方案

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

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

as Link 从 v4 开始被移动到 react-router-dom 包.请参阅文档

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

npm install -S react-router-dom

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

我认为您需要将其更改为

从./containers/HeaderContainer"导入仪表板

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..:(

解决方案

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"

这篇关于反应路由器版本 4 不渲染任何东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆