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