React 路由出现缓慢且错误页面未显示

Question

我正在尝试更熟悉 reactjs 路由。我已经构建了这个小演示 - 但应用程序在页面之间切换时显得很慢，而且当 url 错误时错误页面也不会显示。

http://localhost:3000/ -- 回家

http://localhost:3000/about -- 转到 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

// About.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

// 错误.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

Answer 1

这是因为您实际上是在每次单击锚点（<a>）标签时重新加载页面并重新呈现应用程序。单页应用程序背后的理念是您无需重新加载页面，否则所有内部数据都会丢失。

我的建议是查看 react-router 以在您的应用程序中进行路由：这是 react 中路由的行业标准。它使用起来相当简单，并且可以处理这些事情。

就错误页面而言，我无法确定，因为您在这方面最重要的文件 (router.js) 丢失了。

编辑：啊，我现在看到你已经添加了它，而且你正在使用 react-router。您应该使用react-router 的Link 组件而不是锚标记。

    <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>

您的错误页面未显示的原因是您在 react-router 有机会呈现错误页面之前进行了重定向。如果您删除此重定向，它应该可以工作：

    <Route path='/about' component={About} />
    <Route path='/' component={Home} />
    <Route component={Error} />