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，所有子组件都可用到。