【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