Question

编辑：感谢所有有光泽，快乐的人。诀窍是使用导入/导出语法来启动和运行所有内容。

当我尝试实施React Router时，我不断获得Uncaught ReferenceError: Home is not defined。我不确定这笔交易是什么，因为这应该有效。有人可以发现我的错误，或者说明我是怎么做错的吗？

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router-dom');
var BrowserRouter = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
// var Switch = ReactRouter.Switch;

import Home from './Home';
import Data from './Data';


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


module.exports = App;

我也试过了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和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导出Home组件，但尝试使用ES2015语法导入它。尝试使用以下语法导出Home组件：

export default Home;

React Router＆＃39; Home未定义＆＃39;

1 个答案: