react项目中遇到的bug

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

 

源代码如下： 

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 (
      

        
          {/* 书写路由的链接 */}
          
        
        {this.props.children}
      
    );
  }
}

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

 

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

TypeError: Cannot read property 'location' of undefined
new Router
E:/exercise/react/react-app2de_modules/[email protected]@react-router/es/Router.js:66

 

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

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

 

以下是个人见解，不保证完全正确：在项目中安装了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 and in the same route; will be ignored

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

部分代码如下：

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

修改如下：

里面之所以要嵌套

是因为组件只能有一个子元素，所以用

将多个进行包裹

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

 

 

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

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

例如下面：

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

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

将react-router-dom中的route和semantic-ui-react中的

结合，利用中的属性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 (
      

        
          {/* 书写路由的链接 */}
          
            首页
          
          
            电视
          
        
        {this.props.children}
      
    );
  }
}

export default App;

 

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

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

 

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

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