"React DVA" pits record, router 4.0+, less "always updated"

· Pit 1: Route

After upgrading React-dom to 16.0.0, the corresponding router has been upgraded to more than 4.0. Previous routing settings were invalidated.

Past:

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

Nesting is not allowed at this time.

now the wording:

Remove the Zi Lu from the above.

<route path= '/homeindex ' component={home}/>  

And then in the home component.

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>)

reference:

1.https: //stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4? Noredirect = 1 #

2.https: //www.cnblogs.com/sylarmeng/p/6920903.html

 · Pit 2: less of dva-cli

dva-cli enables CSS Modules by default.

import './style/index.less';
it is invalid.
Of course, this can be done:

import style from './style/index.less';
When using
<div className = {style.title}> I am div </ div>
Can still be used. But sometimes I want this less to be global, instead of applying it once for each control.
Disable CSS Moudules at this time

Open the .roadhogrc file in the root directory

Add one inside the root node

  "disableCSSModules": true,
Just fine. At this point, you can directly reference less in the routing root component, and all subcomponents are available.


reference:
http://www.bubuko.com/infodetail-1897541.html

 · Pit 3: Adaptation for IE
If you want react + dva to adapt to IE, if you open it directly, the screen will be blank and an error will be reported.

At this time you need to add a plugin: babel-polyfill

After npm install babel-polyfil --save

If it is webpack, it can be:

// webpack.config.babel.js
...
{
    ...
    entry: ['babel-polyfill', entry.js],
    ...
}
If it is dva, find index.js in front

import 'babel-polyfill';
Just fine. Try again at this time, it will report a new error:

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.

At this time, it is a small pit for dva.


import 'babel-polyfill';
Before joining

import 'react-dom';
Just fine.

reference:

https://mycodesmells.com/post/add-ie11-support-to-your-react-apps

https://segmentfault.com/q/1010000010997830