Как я могу отобразить более одного компонента из одного файла в приложении. js?

Question

Я изучаю React. js. Мне нужно знать, как я могу отобразить более одного компонента в приложении. js. У меня есть 2 страницы, которые Home.js and About.js.

. После запуска кода просто нажмите О нас, тогда вы получите только текст О странице. Но у меня тоже есть информация о команде и о контенте в файле About. js. Это не отображается. Я импортирую

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

, но никогда не использую до сих пор, потому что я не знаю, куда мне добавить AboutTeam, AboutContent. Пожалуйста, проверьте мой App.js файл. Мне просто нужно, когда пользователь нажимает на О нас, тогда он будет отображать все компоненты, которые у меня есть в About.js.

Я добавил пример здесь https://codesandbox.io/s/happy-almeida-t6q7w?file= / src / App. js

Я получаю

Это мой ожидаемый результат

Еще одно сомнение, я использую приведенный ниже код, поэтому этот код является правильным способом использования?

Не могли бы вы помочь мне с этим?

Дом. 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;

О. 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 };

Приложение. 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;

Указатель. 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

Вы можете написать в приложении. 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

используйте экспорт вместо экспорт по умолчанию для экспорта обоих компонентов из одного файла (О. 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};

, а затем импортируйте его в нужном вам файле

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

Помимо решения, еще одна вещь, которую нужно иметь в виду, это

• компонент, экспортированный с использованием экспорт по умолчанию импортируется как

  import About из "./path файла";

• компонент экспортируется с использованием export, импортируется / импортируется как

  import {About, AboutTeam} из "./path файла";

Answer 3

вы можете создать более одного компонента в одном файле, например:

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>
  );
}

все выглядит нормально, но вы не должны оставлять className пустым, а внутри BrowserRouter должен быть только один обертка, поэтому вы должны обернуть все элементы в div.

Answer 4

// 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 };

Затем импортируйте его как

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

Answer 5

Если вы хотите import {About, AboutTeam} from ..., то вам нужно экспортировать 2 переменные:

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

Не рекомендуется иметь слишком много компонентов в одном файле, но если вы действительно хотите импортировать все , это тоже возможно:

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

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