exporting multiple modules in react js

Question

New to react js and trying to following tutorial  Unfortunately the code given in the page didn t work   webpack complained   ERROR in   App jsx Module build failed  SyntaxError  Only one default export allowed per module    Wonder how to fix it   Thanks        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             lt div gt               lt ul gt                  lt li gt  lt Link to     home  gt Home lt  Link gt  lt  li gt                  lt li gt  lt Link to     about  gt About lt  Link gt  lt  li gt                  lt li gt  lt Link to     contact  gt Contact lt  Link gt  lt  li gt               lt  ul gt               this props children            lt  div gt                  export default App   class Home extends React Component      render           return             lt div gt               lt h1 gt Home    lt  h1 gt            lt  div gt                  export default Home   class About extends React Component      render           return             lt div gt               lt h1 gt About    lt  h1 gt            lt  div gt                  export default About   class Contact extends React Component      render           return             lt div gt               lt h1 gt Contact    lt  h1 gt            lt  div gt                  export default Contact        main js      import React from  react   import ReactDOM from  react-dom   import App from    App jsx    ReactDOM render  lt App  gt   document getElementById  app       UPDATE1  I commented out all the export default and added the following at the end  module exports         App  App      Home  Home      About  About      Contact  Contact     Now there is no compile error but the web page is a blank  I am not sure what is wrong here

User · Answer

When you  import App from    App jsx     That means it will import whatever you export default  You can rename App class inside App jsx to whatever you want as long as you export default it will work but you can only have one export default   So you only need to export default App and you don t need to export the rest   If you still want to export the rest of the components  you will need named export   https   developer mozilla org en docs web javascript reference statements export

User · Answer

You can have only one default export which you declare like   export default App   or  export default class App extends React Component        and later do import App from    App   If you want to export something more you can use named exports which you declare without default keyword like   export     About    Contact      or   export About  export Contact    or    export const About   class About extends React Component       export const Contact        gt    lt div gt       lt  div gt      and later you import them like   import App    About  Contact   from    App     EDIT   There is a mistake in the tutorial as it is not possible to make 3 default exports in the same main js file  Other than that why export anything if it is no used outside the file   Correct 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       lt Router history    browserHistory  gt         lt Route path       component    App  gt            lt IndexRoute component    Home    gt            lt Route path    home  component    Home    gt            lt Route path    about  component    About    gt            lt Route path    contact  component    Contact    gt         lt  Route gt      lt  Router gt      document getElementById  app      EDIT2   another thing is that this tutorial is based on react-router-V3 which has different api than v4

[reactjs] exporting multiple modules in react.js

Examples related to reactjs