反应路由显示缓慢且错误页面未显示

我想更熟悉reactjs路由 . 我已经构建了这个小型演示 - 但是应用程序在页面之间切换时显得很慢，并且当网址错误时错误页面也没有显示 .

http://localhost:3000/ - 回家

http://localhost:3000/about - 转到约（但渲染感觉很慢）

http://localhost:3000/abc - 去家而不是错误 - 为什么？

结构看起来像这样

my-app
├── build
│   └── static_
│   └── favicon.ico
│   └── index.html
├── node_modules_
├── .gitignore
├── favicon.ico
├── index.html
├── package.json
├── README.md
└── src
    ├── components
    │    ├── About
    │    │    └── About.js
    │    ├── Error
    │    │    └── Error.js
    │    ├── Header
    │    │    └── Header.js
    │    └── Home
    │        └── Home.js
    ├── index.css
    ├── index.js
    └── router.js

// index.js

import React, { Component } from 'react'
import { render } from 'react-dom'

import './index.css'

import Routes from './router'

// this is a class because it needs state
class App extends Component {
  componentDidMount() {    

  }

  render() {
    return (
      <Routes />
    )
  }
}

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

// Router.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'

// components
import Home from './components/Home/Home'
import About from './components/About/About'
import Error from './components/Error/Error'

import Header from './components/Header/Header'

const history = createBrowserHistory()

// we can pass the lang files as props to the routes
// we should have a nested route inside service here to show the other services page

class Routes extends Component {
  render () {
    return (
        <Router history={history}>
          <div className='off-canvas-wrap' data-offcanvas>
            <div className='inner-wrap'>
              <Header transparent />
              <Switch>
                <Route path='/about' component={About} />
                <Route path='/' component={Home} />
                <Redirect from='/' />
                <Route component={Error} />
              </Switch>
            </div>
          </div>
        </Router>
    )
  }
}

export default Routes

//关于.js

import React, { Component } from 'react'

// this is a class because it needs state
class About extends Component {
  componentDidMount() {    

  }

  render() {
    return (
      <div className="app">
        About
      </div>
    )
  }
}

export default About

// Error.js

import React, { Component } from 'react'

// this is a class because it needs state
class Error extends Component {
  componentDidMount() {    

  }

  render() {
    return (
      <div className="app">
        Error
      </div>
    )
  }
}

export default Error

// Header.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// this is a class because it needs state
class Header extends Component {

  state = {
    current: 'home',
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  componentDidMount() {    

  }

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="home">
          <Link to="/home" rel="noopener noreferrer">Home</Link>
        </Menu.Item>
        <Menu.Item key="about">
          <Link to="/about" rel="noopener noreferrer">About</Link>
        </Menu.Item>
      </Menu>
    )
  }
}

export default Header

// Home.js

import React, { Component } from 'react'

// this is a class because it needs state
class Home extends Component {
  componentDidMount() {    

  }

  render() {
    return (
      <div className="app">
        Home
      </div>
    )
  }
}

export default Home