在一个 React 页面上使用多个组件

Question

I am new to learning React and so far as I have been exploring its amazing. I have a quick question which is how can I display multiple modules such as "app.js" and "About.js" on one page? is this possible?

Here is some images that may help.

React App.js and About.js

React index.js

React js console error

Answer 1

Commonly in a react app, you will route based on different URLs.

The different 'modules' (also known as components) are typically defined in other JS files. See the HomePage and AboutPage files in the example below.

First, import the other pages. Second, route to them given a path.

A common routing solution in React is React Router

import React from 'react';

import { BrowserRouter } from 'react-router-dom';

import HomePage from './pages/HomePage.js';
import AboutPage from './pages/AboutPage.js';

const MyApp = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/home" component={HomePage} />
      <Route path="/about" component={AboutPage} />
    </Switch>
  </BrowserRouter>
);