react项目中遇到的bug

素颜马尾好姑娘i 2022-03-27 21:16 369阅读 0赞

**1、react-router使用时，在浏览器出错：Attempted import error: 'Link' is not exported from 'react-router**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70][]

源代码如下：

import React, { Component } from 'react';
    import {Menu} from 'semantic-ui-react';
    import 'semantic-ui-cssmantic.min.css';
    import {Link} from 'react-router';
    
    
    class App extends Component {
      render() {
        return (
          <div>
            <Menu pointing secondary>
              {/* 书写路由的链接 */}
              <Link></Link>
            </Menu>
            {this.props.children}
          </div>
        );
      }
    }

**出错原**因：通常在 React 中，一般要引入两个包，`react`和 `react-dom`，那么`react-router`和`react-router-dom`不同之处就是后者比前者多出了`<Link> <BrowserRouter>`这样的 DOM 类组件，因此只需引用`react-router-dom`这个包就OK了

**2、在react 项目中，使用react-router，浏览器报错：**

**TypeError: Cannot read property 'location' of undefined  
new Router  
E:/exercise/react/react-app2de\_modules/\_react-router@4.3.1@react-router/es/Router.js:66**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 1][]

**package.json中的依赖插件如下所示：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 2][]

在index.js中引进路由，代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 3][]

以下是个人见解，不保证完全正确：在项目中安装了react-router和react-router-dom,而后者后安装，这时候应该使用react-router-dom中的BrowserRouter代替react-router中的router，即在整个项目中我们只需要引进react-router-dom就可以了，不需要引进react-router,即将上面的红圈部分改成下面的形式，浏览器就不报错了：

import {BrowserRouter as Router,Route} from 'react-router-dom';

**3、You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored**

**在react-router-dom版本为4.x.x的时候，不能在<Route>里面在嵌套<Route>**

部分代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 4][]

**报错原因**：在react-router-dom版本为4.x.x中将component的API进行了修改，因此不能在<Route>嵌套<Route>

**修改如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 5][]

<Router>里面之所以要嵌套<div>是因为组件<Router>只能有一个子元素，所以用<div>将多个<Route>进行包裹

**如果代码改成下面，就会报错：A <Router> may have only one child element**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 6][]

**4、validateDOMNesting(...): <a> cannot appear as a descendant of <a>**

大致是说在<a>标签里面不能在嵌套<a>标签

例如下面：

这是无效的HTML，在浏览器中会转化成下面的形式：

React的警告是说实际的DOM和virtual dom不一样，可能会存在bug，做法就是不要在<a>里面在嵌套<a>

**将react-router-dom中的route和semantic-ui-react中的<Menu>结合，利用<Menu.Item>中的属性as，将as值设置为NavLink就可以实现路由跳转了**

import React, { Component } from 'react';
    import {Menu} from 'semantic-ui-react';
    import 'semantic-ui-cssmantic.min.css';
    import {NavLink} from 'react-router-dom';
    
    
    class App extends Component {
      constructor(props){
        super(props);
    
        this.state = {
          activeItem:'home'
        };
    
        this.handleItemClick = this.handleItemClick.bind(this);
      }
    
      handleItemClick = (e, {name}) => this.setState({activeItem:name})
    
    
      render() {
        const { activeItem } = this.state;
        return (
          <div>
            <Menu pointing secondary>
              {/* 书写路由的链接 */}
              <Menu.Item as={NavLink} to='/' name="home" active={activeItem === "home"} onClick={this.handleItemClick}>
                首页
              </Menu.Item>
              <Menu.Item  as={NavLink} to='/tv' name='tv' active={activeItem === "tv"} onClick={this.handleItemClick}>
                电视
              </Menu.Item>
            </Menu>
            {this.props.children}
          </div>
        );
      }
    }
    
    export default App;

**5、IndexRoute' is not exported from 'react-router-dom'**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 7][]

原因：在react-router-dom的版本为v4.x.x是没有这个组件了

**6、在项目中安装了jquery，但是在使用$.ajax()方法的时候，报错unexpecting token**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 8][]

**报错原因**：在用ES6的模块定义组件的时候，$.ajax()方法应该放在constructor()方法里面

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220328/c3c47a085c0d48f68e38201d9aba3f41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220328/4ef7ac70f05b4e08b1277a37f3a28dc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 2]: /images/20220328/0fc83571d6204b5389727f10bb668a49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 3]: /images/20220328/7741cda0a8634bd2833faaa79c876423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 4]: /images/20220328/0b53601628da43348d56878f62f42935.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 5]: /images/20220328/4020fc43d0574ed0811a9d4afbffa5aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 6]: /images/20220328/ed14c6f7cacc4e00a3b6f54c0129497d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 7]: /images/20220328/e399d3087201413895c05a16d999ab4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 8]: /images/20220328/0dc42f606fcd455a9d3ca34fabd6d028.png