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;