【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