从React JS中的导航栏中链接页面

Question

在React js应用程序的导航栏中链接页面时出现错误。

这是我得到的错误

元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。 检查sideDrawer的渲染方法。

这是我的index.js代码

import React from 'react';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import  { render }  from 'react-dom';

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

sidedrawer.js的代码

 import React from 'react';
 import {Link } from 'react-dom';
 import './AboutPage.js';
 import './SideDrawer.css';



  const sideDrawer = props => {
                         let drawerClasses = 'side-drawer';
                         if (props.show) {
                                        drawerClasses = 'side-drawer open';
                                         }
                       return (<nav className={drawerClasses}>
                        <ul>
        <li> <Link to='/AboutPage'> About</Link></li>
        <li> <a href="/"> Users</a></li>

                  </ul>

           </nav>);

             };

              export default sideDrawer;

我的App.js代码

      import React, { Component } from 'react';
      import Toolbar from './components/Toolbar/Toolbar';
      import SideDrawer from './components/SideDrawer/SideDrawer';
      import Backdrop from './components/Backdrop/Backdrop';


         class App extends Component {

       state = {
     SideDrawerOpen: false
       };



         drawerToggleClickHandler = () => {
           this.setState((prevState) => { 
         return{sideDrawerOpen: !prevState.sideDrawerOpen};
        });

       };

       backdropClickHandler = () => {
       this.setState({sideDrawerOpen: false});

        };

      render() {

    let backdrop;

 if (this.state.sideDrawerOpen) {

   backdrop = <Backdrop click={this.backdropClickHandler}/>
  }
 return (
  <div Style={{height: '100%'}}>
  <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
 <SideDrawer show={this.state.sideDrawerOpen} />
  {backdrop}
     <main style={{marginTop: '64px'}}>
     <p> This is the page content! </p>
            </main>
           </div>
          );
          }
      }

        export default App;