score:1

Accepted answer

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;

score:0

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 /> ...

score:0

// 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'

score:0

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.

score:0

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";


Related Query

More Query from same tag