React框架新闻网站学习过程中遇到的错误总结

1.安装指定版本插件命令

npm install 插件名字@1.1.4(版本号) --save 或 yarn add 插件名字@1.1.4(版本号) --dev

2.Error:‘Link’ is not exported from 'react-route'

解决：‘react-router’4.0*之后的版本可以引用‘react-router-dom’代替‘react-router’

3.关于react-router中<Link>的调试   Error : You should not use <Link> outside a <Router>

解决方法：在Link外加一层<BrowserRouter></BrowserRouter>

4.Error: Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法

解决方法: babel版本不统一，把babel所有插件统一改成6.0或7.0版本即可

5.Module build faild:TypeError: fileSystem.statSync is not a function

解决方法：babel-loader是7.0版本而webpack是1.15.0版本，二者不兼容，把babel-loader改成6.4.1版本

6. Uncaught TypeError : Cannot  read property 'uniquekey' of undefined（这个问题困扰了我好几天好气！！！）

react-router4.*以上版本对2.*版本中的 this.props.params.uniquekey用法做了改动，改成this.props.match.params.uniquekey问题就解决了！！！

7. Error： Webpack has been initialised using a configuration object that does not match the API schema.- configuration.module has an unknown property 'loaders'. These properties are valid:object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?,     strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrapped ContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (`NormalModuleFactory`).

解决方法：webpack.config.js文件里的  module{loaders:[......]} 改为  module{rules：[......]}

8. React-router版本5.0.0，移动端开发<Link>页面跳转时url会发生变化，但是页面不跳转，手动刷新页面才会正常跳转

解决方法：<link>标签里没有target=“_blank”属性时，Link标签外要用<Route>包裹而不是<BrowserRouter>

9. React-router 4.*以上版本route文件中，一个<BrowserRouter>下只能有一个Route，如果想放多个需要在<Route>外整体加<Switch>，代码示例如下

<BrowserRouter >
                        <Switch>
                            <Route exact path="/" component={PCIndex}></Route>
                            <Route path="/details/:uniquekey" component={PCNewsDetails}></Route>
                            <Route path="/usercenter" component={PCUserCenter}></Route>
                        </Switch>
                    </BrowserRouter>