【react dva】填坑實錄，router 4.0+， less 【一直更新】

 · 坑1：路由

升級react-dom到16.0.0後，相應的router 也被升級到了4.0以上。以往的路由設置失效。

以往：

<Route path='/HomeIndex' component={Home}>  
     <IndexRoute component={HomeIndex}/>  
     <Route path='/Home/About' component={About}/>  
     <Route path='/Home/News' component={News}/>  
     <Route path='/Home/Team' component={Team}/>  
 </Route>  

現在是不允許嵌套的。

現在的寫法：

將上面的子路由刪掉。

<Route path='/HomeIndex' component={Home} />  

然後在Home組件裏

 

const Home = ({ match }) => (
  <div>
    <h2>Topics</h2>
    
     <Route path='/Home/About' component={About}/>  
     <Route path='/Home/News' component={News}/>  
     <Route path='/Home/Team' component={Team}/>  
 </div>) 

參考：

1.https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4?noredirect=1#

2.https://www.cnblogs.com/sylarmeng/p/6920903.html

 · 坑2：dva-cli的less

dva-cli默認開啓CSS Modules，此時如果直接

import  './style/index.less';

是無效的。

當然，可以這樣：

import style from './style/index.less';

然後用的時候

<div className={style.title}>I am div</div>

還是可以 用的。但是有時候我希望這個less是全局的，而不是我每個控件都要應用一次。

這時候就要禁用CSS Moudules

打開根目錄的.roadhogrc文件

在根節點內加一個

  "disableCSSModules": true,

即可。此時就可以直接在路由根組件中直接引用less，所有子組件都可用到。


參考：

http://www.bubuko.com/infodetail-1897541.html

 · 坑3：針對IE的適配

如果想讓react+dva適配IE ，如果直接打開，則會白屏，並報錯 例如 startsWith，includes 等等……

這時候需要加個插件：babel-polyfill

npm install babel-polyfil --save 後

如果是webpack 可以這樣：

// webpack.config.babel.js
...
{
    ...
    entry: ['babel-polyfill', entry.js],
    ...
}

如果是dva，則找到index.js 在前面

import 'babel-polyfill';

即可。這時候再試，則會報新 錯：

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of StatelessComponent.

此時，則是dva的小坑，這時候在

import 'babel-polyfill';

前 加入 

import 'react-dom';

即可！

參考：

https://mycodesmells.com/post/add-ie11-support-to-your-react-apps

https://segmentfault.com/q/1010000010997830