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

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.