Question

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

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

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

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

Answer 1

这是因为您实际上每次点击锚点（<a>）标签时都会重新加载页面并重新渲染应用程序。单页应用程序背后的想法是你不重新加载页面，否则所有内部数据都将丢失。

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

就错误页面而言，我无法分辨，因为缺少这方面最重要的文件（router.js）。

编辑：啊，我现在看到你已经添加了它，并且你也在使用react-router。您应该使用react-router的{{1}}组件而不是锚标签。

Link

您的错误页面未显示的原因是您在react-router获取呈现错误页面之前重定向。如果您删除此重定向，则应该有效：

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

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

1 个答案: