ReactJS Error : Only one default export allowed per module - components

Question

This multiple component doesn't work;
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'))
It give a below error;
ERROR in ./main.js Module build failed: SyntaxError:
C:/Users/hasithay/Desktop/reactApp/main.js: Only one default export
allowed per module.
31 | } 32 |
33 | export default Home;
| ^ 34 | 35 | class About extends React.Component { 36 | render() {
# multi main webpack: bundle is now VALID
Answer should be three clickable links that can be used to change the route When the app is started.

Answer 1

Multiple component does work but you need to export the component with name and you can only export one default component.
Like in below expample I export the App Component as defalut component and other component Home, About, Contact as a named component.
For the named component you need to import them using there name :
import {Home,About,Contact} from './App.jsx';
import default component:
import App from './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'));
Don't import default component (App Component) with the name component (Home, About, Contact). if you import them with the named component they didn't render properly.
Blockquote

Answer 2

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 3

you have one line with the code:
export default App;
After some other lines you have the code:
export default Home;
That's just the problem! you have used export default 2 times in one file. you have to change one of them to solve the problem.
"you cannot use export default more than one time in a file".

Answer 4

export all the components in one line
export default {App, Home, Contacts, About};

Answer 5

Export Default Home is used to Expose any module to use in other files, but only one component is a default not all. A module can only be exported once. You are using the same statement to export each component which is unnecessary.
Importing components using this statement
import {Home,About,Contact} from './App.jsx';

Answer 6

You need to remove default keywords on both App and Home classes, as per code below:
export App;
export Home;
default keywords is only use when you want to export ONE class.