React + Express Dynamic菜单项，无需重新加载页面

Question

我使用React + Express，但是我在这两个方面都是新手，因此请提出如何从外部组件或其他组件重新加载组件的建议。

我将代码分为三部分：1. App.js（主js文件）2.）Home.js和3.）Sidebar.js

在边栏中，我们要显示数据库中的模块列表。

我在Home.js中有模块表单，所以当用户提交表单时，我想要的是它在菜单栏中显示为菜单项而无需重新加载页面。

App.js

import React, { Component } from 'react';
import './App.css';

import {
  Route,
  Switch,
  Redirect
} from 'react-router-dom';

import Sidebar from './components/layout/Sidebar';
import Header from './components/layout/Header';
import Home from './components/Home';
import About from './components/About';
import Grid from './components/Grid';
import Messages from './components/Messages';


class App extends Component {
  state = {
    response: ''
  };


  render() {
    return (
      <div className="wrapper">
        <Sidebar />
        <div id="content">
          <Header />
          <p className="App-intro">{this.state.response}</p>
          <Switch>
            <Route exact path="/"  component={Home} />
            <Route path="/messages" component={Messages} />
            <Route path="/about" component={About} />
            <Route path="/grid" component={Grid} />
            <Redirect to="/" />
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;

Home.js

import React, { Component } from 'react';
import Sidebar from './layout/Sidebar';


class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.axios = require('axios');
        this.sidebar = new Sidebar();
    }


    handleInputChange = (event) => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    onSave = () => {
        this.axios.post('/api/addmodule', this.state)
        .then(res => {
            console.log(this.sidebar);
            // successfully add the module
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() {
        return (    
            <div>
            <h2>Module</h2>
            <form id="test" >
            <div className="form-group">
            <label htmlFor="Name">Module Name:</label>
            <input type="text" className="form-control" name="moduleName" id="mName" onChange={this.handleInputChange} />
            </div>
            <div className="form-group">
            <label htmlFor="Alias">Front-Alias:</label>
            <input type="text" className="form-control" name="moduleAlias" id="mfAlias" onChange={this.handleInputChange} />
            </div>
            <button type="button" onClick={this.onSave} className="btn btn-default">Submit</button>
            </form>
            </div>
            )
    }
}

export default Home;

Sidebar.js

import React from 'react';
import { Link } from "react-router-dom";

class Sidebar extends React.Component {

  constructor(props) {
        super(props);
        this.state = {
            menulist : []
        };
  }

  componentDidMount() {
    this.axios = require('axios');
    this.axios.post('/api/modulelist', this.state)
        .then(res => {
            this.setState({
              menulist: res.data
            });
        })
        .catch(function (error) {
            console.log(error);
        });
  }

  render() {
    return (
      <nav id="sidebar">
        <div className="sidebar-header">
            <h3>Sidebar</h3>
        </div>
        <ul className="list-unstyled components">
           <div className="sidebar-subheader">
                <h3>Dashboard</h3>
            </div>
            {
                Object.keys(this.state.menulist).map((index,i) => (
                        <li key={i}>
                          <span><a href={this.state.menulist[index].varAlias}>{this.state.menulist[index].varModuleName}</a></span>
                        </li>
                    )) 
            }
        </ul>
    </nav>
    );
  }
}

export default Sidebar;