ReactJS 错误：每个模块仅允许一个默认导出

Question

这个多组件不起作用；

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
               <li><Link>Home</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export default Home;

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
      </Route>
   </Router>

), document.getElementById('app'))

它给出以下错误；

./main.js 模块构建失败：语法错误： C:/Users/hasithay/Desktop/reactApp/main.js：只有一个默认导出 每个模块允许。

31 | } 32 |

33 |导出默认首页； | ^ 34 | 35 | 35类关于扩展 React.Component { 36 | 渲染（）{

@ multi main webpack：捆绑现在有效

答案应该是三个可点击的链接，可用于在应用程序启动时更改路线。

Answer 1

多组件确实可以，但需要导出带有名称的组件，并且只能导出一个默认组件。

就像下面的示例一样，我将 App 组件导出为默认组件，将其他组件 Home、About、Contact 导出为命名组件。

对于命名组件，您需要使用名称导入它们：

从'./App.jsx'导入{主页，关于，联系}；

导入默认组件：

从'./App.jsx'导入应用程序；

import React from 'react';
import {Link} from 'react-router';


class App extends React.Component {
  render() {
    return(
      <div>
      <ul>
      <li><Link to="home">Home</Link></li>
      <li><Link to="about">About</Link></li>
      <li><Link to="contact">Contact</Link></li>
      </ul>

      {this.props.children}
      </div>
    )
  }
}

export default App;



export class Home extends React.Component {
  render() {
    return (
      <h1>Home Page Content</h1>
    )
  }
}



export class About extends React.Component {
  render() {
    return (
      <h1>About Page Content</h1>
    )
  }
}


export class Contact extends React.Component {
  render()  {
    return (
      <h1>Contact Page Content</h1>
    )
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import App from './App.jsx';
import {Home,About,Contact} from './App.jsx';

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Contact} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

	
), document.getElementById('app'));

不要导入带有名称组件（Home、About、Contact）的默认组件（App组件）。如果您使用指定组件导入它们，它们将无法正确呈现。

块引用

Answer 2

你有一行代码：

export default App;

在其他几行之后，您将获得代码：

export default Home;

这就是问题所在！您已在一个文件中使用

export default

2 次。你必须改变其中之一才能解决问题。

“您不能在一个文件中多次使用

export default

”。

Answer 3

import React from 'react';
import {Link} from 'react-router';


class App extends React.Component {
  render() {
    return(
      <div>
      <ul>
      <li><Link to="home">Home</Link></li>
      <li><Link to="about">About</Link></li>
      <li><Link to="contact">Contact</Link></li>
      </ul>

      {this.props.children}
      </div>
    )
  }
}

export default App;



export class Home extends React.Component {
  render() {
    return (
      <h1>Home Page Content</h1>
    )
  }
}



export class About extends React.Component {
  render() {
    return (
      <h1>About Page Content</h1>
    )
  }
}


export class Contact extends React.Component {
  render()  {
    return (
      <h1>Contact Page Content</h1>
    )
  }
}

Answer 4

在一行中导出所有组件

export default {App, Home, Contacts, About};

Answer 5

Export Default Home 用于公开任何模块以在其他文件中使用，但只有一个组件是默认的，而不是全部。一个模块只能导出一次。您使用相同的语句来导出不必要的每个组件。

使用此语句

导入组件

import {Home,About,Contact} from './App.jsx';

Answer 6

您需要删除

default

和

App

类上的

Home

关键字，如下代码所示：

export App;
export Home;

default

关键字仅在您想要导出一个类时使用。

Answer 7

我使用 redux 遇到了同样的问题，因为我使用

export default function increment() {
  return { type: "INCREMENT" };
}
export default function decrement() {
  return { type: "DECREMENT" };
}
export default function reset() {
  return { type: "RESET" };
}

当我删除默认值时，它就可以工作了。

export function increment() {
  return { type: "INCREMENT" };
}
export function decrement() {
  return { type: "DECREMENT" };
}
export function reset() {
  return { type: "RESET" };
}