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

這時候就要禁用CSS Moudules

開啟根目錄的.roadhogrc檔案

在根節點內加一個

  "disableCSSModules": true,

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