React路由器'家沒有定義'

編輯：感謝你所有你閃亮，快樂的人。訣竅是使用導入/導出語法來啓動和運行一切。React路由器'家沒有定義'

當我試圖實現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;

來源

2017-08-01 Alex Marple

您能否顯示您的Home組件 –

已添加！我用下面的用戶建議使用'./Home'中的import {Home};以通過錯誤消息，但現在我沒有渲染任何東西從家裏... –

你必須使用它完全一樣，因爲你不默認導出家庭組件。嘗試使用類似的方式導入其他組件，以及在家裏，你現在得到任何錯誤 –

我認爲這個問題是您使用CommonJS的導出您的家庭成分，但試圖通過導入它ES2015語法。嘗試使用以下語法導出您的Home組件：

export default Home;

來源

2017-08-01 19:36:29

謝謝。我按照你的建議完成了。我想我比較接近但還沒有。 –

明白了！必須經歷整個過程，用進口和出口來代替一切。謝謝！ –

很高興我能夠幫助:)請將我的答案標記爲可接受的解決方案，如果您認爲這是最能幫助您的解決方案 –

React路由器'家沒有定義'

回答

相關問題