React路由器'家没有定义'

Question

编辑：感谢你所有你闪亮，快乐的人。诀窍是使用导入/导出语法来启动和运行一切。

当我试图实现React路由器时，我总是收到Uncaught ReferenceError: Home is not defined。我不确定这项交易是什么，尽管这应该起作用。有人能够发现我的错误，或者对我如何做错这件事情有所了解吗？我也试过var Home = require('./Home');，但那也行不通。

以下是我的Home组件的设置方法。

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Nav = require('./Nav'); 
var Hero = require('./Hero'); 
var Block = require('./Block'); 
var Table = require('./Table'); 
var Footer = require('./Footer'); 
var Modal = require('./Modal'); 

class Home extends React.Component { 
    render(){ 
    return (
     <div> 
     <Nav /> 
     <Hero /> 
     <Block /> 
     <Table /> 
     <Footer /> 
     <Modal /> 
     </div> 
    ) 
    } 
} 

module.exports = Home; 

好吧，我已经更新了应用程序和家庭，但我仍然得到一个空白页。没有错误。

App.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter, Route } from 'react-router-dom'; 

import { Home } from './Home'; 


class App extends React.Component { 
    render() { 
    return (
     <BrowserRouter> 
     <div> 
      <Route exact path="/" component={Home} /> 
     </div> 
     </BrowserRouter> 
    ) 
    } 
} 

export default App; 

Home.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import { Nav } from './Nav'; 
import { Hero } from './Hero'; 
import { Block } from './Block'; 
import { Table } from './Table'; 
import { Footer } from './Footer'; 
import { Modal } from './Modal'; 

class Home extends React.Component { 
    render(){ 
    return (
     <div> 
     <Nav /> 
     <Hero /> 
     <Block /> 
     <Table /> 
     <Footer /> 
     <Modal /> 
     </div> 
    ) 
    } 
} 


export default Home; 

Answer 1

我认为这个问题是您使用CommonJS的导出您的家庭成分，但试图通过导入它ES2015语法。尝试使用以下语法导出您的Home组件：

export default Home;