react踩坑

1. 默认路由在V5被废除

1. Attempted import error: 'IndexRoute' is not exported from 'react-router-dom'.
   ps:在react-routerV5 已经废除掉了默认路由
   
   如图，在react-router的官方文档里面已经找不到IndexRoute的API的。

2. tiny-warning.esm.js:11 Warning: You should not use and in the same route; will be ignored
   

• ⚠警告的路由组件写法
  
• 问题分析

开始的时候，想要使用默认路由，后来发现被废弃了，直接从IndexRoute改成了Route，忘记调整顺序。

• 解决办法

import {
       Route, Switch } from 'react-router';

import App from '../views/App/App'
import Login from '../views/Login/Login'
import {
      BrowserRouter } from 'react-router-dom';
function Routes() {
     
  return (
    <BrowserRouter >
    <Switch>
        <Route path='/' component={
     App} />
        <Route path='/Login' component={
     Login} />
    </Switch>
     
    </BrowserRouter>
    
  );
}

export default Routes;

---

2、组件问题

1. Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. at routes

组件的首字母应该不写，不然识别不了

2. Warning: Login(...): Norendermethod found on the returned component instance: you may have forgotten to definerender.

• 报错代码

import React from 'react';
import {
      withRouter } from 'react-router';

class Login extends React.Component{
     

    
    render(){
     
        return (
            <div className="login">
                登录
            </div>
        )
    }

}
export default withRouter(Login)

3. 构造器问题

src\views\Login\Login.jsx Line 5:5: Useless constructor no-useless-constructor

• 解决办法：加return

---

4. 不要使用没有调用的constructor
   

• 错误代码，还是上面的登录代码（听者伤心闻者流泪）
• 解决办法： 把constructor注释掉

• 结果
  

5. tiny-warning.esm.js:11 Warning: You should not use and in the same route; will be ignored

---

感言

之前简单学习了一下`react`，然后没有业务需要，一直没用，今天回来一用，频繁踩坑.。学习了还是得应用呀，互联网的脚步，稍微落后一步，就出大麻烦，呜呜

---

---