How can I display more than one component from the same file in the App.js?

Question

I am learning React.js. I need to know how can I display more than one component in App.js. I have 2 pages which are Home.js and About.js.

After run the code Just click on About us then you will get only About Page text. But I have About Team and About content too in the About.js file. That is not displaying. I import the

import { About, AboutTeam, AboutContent } from "./Pages/About";

but never use till now because I don't know where should I add AboutTeam, AboutContent. Please check my App.js file. I just need when the user clicks on About us then It will display all the components which I have in About.js.

I added example here https://codesandbox.io/s/happy-almeida-t6q7w?file=/src/App.js

I am getting

This is my expected output

One more doubt, I am using the below code so is this code is the correct way to use?

Would you help me out with this?

Home.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';

const Home=()=>{
  return(
    <div className="">
        <h2>Home page</h2>
    </div>
  );
}
export default Home;

About.js

    import React from 'react';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import './css/Style.css';

    const About=()=>{
      return(
        <div className="">
            <h2>About page</h2>
        </div>
      );
    }
const AboutTeam = () => {
  return (
    <div className="">
      <h2>About Team dummy text</h2>
    </div>
  );
};

const AboutContent = () => {
  return (
    <div className="">
      <h2>About content dummy text</h2>
    </div>
  );
};

export { About, AboutTeam, AboutContent };

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';
import HeaderMenu from './components/Header';
import Home from './pages/Home';
import { About, AboutTeam, AboutContent } from "./Pages/About";
import Footer from './components/Footer';
import { BrowserRouter, Route, Switch } from 'react-router-dom';


const App=()=>{
  return(
    <BrowserRouter>
      <HeaderMenu />
    <div className="">
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about"  component={About} />
        </Switch>
    </div>
    <Footer />
    </BrowserRouter>
  );
}
export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />,document.getElementById('root'));

serviceWorker.unregister();

Answer 1

You can write in App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';
import HeaderMenu from './components/Header';
import Home from './pages/Home';
import { About, AboutTeam, AboutContent } from "./Pages/About";
import Footer from './components/Footer';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const AboutPage = () => (
  <>
    <About />
    <AboutTeam />
    <AboutContent />
  </>
);

const App=()=>{
  return(
    <BrowserRouter>
      <HeaderMenu />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={AboutPage} />
        </Switch>
      <Footer />
    </BrowserRouter>
  );
}
export default App;

Answer 2

If you want to import {About, AboutTeam} from ..., then you need to export 2 variables:

export const About = ...
export const AboutTeam = ...

It's not advisable to have too many components in 1 file, but if you really want to import all, that is also possible:

import * as About from './About.js'

... <About.About /> ... <About.AboutTeam /> ...

Answer 3

// About.js

const AboutTeam = () => {
  return (
    <div className="">
      <h2>About Team</h2>
    </div>
  );
};
const About = () => {
  return (
    <div className="">
      <h2>About page</h2>
    </div>
  );
};

export { About, AboutTeam };

Then import it as

import { About, AboutTeam } from './About.js'

Answer 4

you can create more than one component in one file like this:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';

export const AboutTeam =() => {
    return (
     <div>About Team Page </div>
    )
}

export const About =()=>{
  return(
    <div className="">
        <h2>About page</h2>
    </div>
  );
}

all things are looking fine, but you should not leave className empty and inside BrowserRouter there should be only one wrapper so you should wrap all elements inside a div.

Answer 5

use export instead of export default to export both the component from the same file (About.js)

//About.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/Style.css';

const About=()=>{
  return(
    <div className="">
        <h2>About page</h2>
    </div>
  );
}

const AboutTeam=()=>{
  return(
    <div className="">
      <h2>About Team</h2>
    </div>
  );
}

export {About, AboutTeam};

and then import it in the file you need,

import {About, AboutTeam} from "./About.js";

Apart from the solution, one more thing to keep in mind is

• component exported using export default, is imported like

  import About from "./path of file";

• component exported using export, is/are imported like

  import {About, AboutTeam} from "./path of file";