Nieuw bij react.js en probeer zelfstudiete volgen. Helaas werkte de code op de pagina niet. webpack klaagde
ERROR in ./App.jsx
Module build failed: SyntaxError: Only one default export allowed per module.
Vraag je af hoe je dit kunt oplossen. Bedankt.
=== App.jsx====
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 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;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;
=== main.js ===
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
UPDATE1
Ik heb commentaar gegeven op alle export default
en heb het volgende aan het einde toegevoegd
module.exports = {
App: App,
Home: Home,
About: About,
Contact: Contact
}
Er is nu geen compileerfout, maar de webpagina is leeg. Ik weet niet zeker wat hier mis is.
Antwoord 1, autoriteit 100%
U kunt slechts één standaard export hebben die u als volgt declareert:
export default App;
of
export default class App extends React.Component {...
en later import App from './App'
Als u iets meer wilt exporteren, kunt u benoemdeexports gebruiken die u declareert zonder default
trefwoord zoals:
export {
About,
Contact,
}
of:
export About;
export Contact;
of:
export const About = class About extends React.Component {....
export const Contact = () => (<div> ... </div>);
en later importeer je ze als:
import App, { About, Contact } from './App';
BEWERKEN:
Er zit een fout in de tutorial omdat het niet mogelijk is om 3 standaard exports te maken in hetzelfde main.js
bestand. Anders dan dat, waarom iets exporteren als het niet buiten het bestand wordt gebruikt?. Corrigeer main.js
:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
...
}
class Home extends React.Component {
...
}
class About extends React.Component {
...
}
class Contact extends React.Component {
...
}
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
EDIT2:
een ander ding is dat deze tutorial is gebaseerd op react-router-V3 die een andere api heeft dan v4.
Antwoord 2, autoriteit 2%
Als je
import App from './App.jsx';
Dat betekent dat het alles importeert wat je export default
. U kunt de klasse App
binnen App.jsx
hernoemen naar wat u maar wilt, zolang u maar export default
, het zal werken, maar u kunt maar één export hebben standaard.
Je hoeft dus alleen export default App
te exporteren en de rest niet.
Als je de rest van de componenten nog steeds wilt exporteren, heb je benoemde export nodig.
https://developer.mozilla.org/en /docs/web/javascript/reference/statements/export
Antwoord 3
Het belangrijkste probleem is dat u meer dan één export default
-zoekwoord heeft gebruikt.
Je zou kunnen gebruiken:
export default App
export {home}
etc etc