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