react-router v4 扫雷记

csdn的编辑器终于能截图了啊，比起之前试图推荐的markdown编辑器，贴图还是更好用，毕竟这里是博客不是文档^_^

---

1、error:  Nothing was returned from render.

     cause：return 后面的括号必须在同一行，如果(在下一行就会认为没有返回东西

2、warning: You should not use and in the same route; will be ignored

// 这种写法会认为是嵌套组件，在react-router v4中不再推荐这种嵌套，应该在业务组件中去写各自的路由
   	
	
// 改为自闭标签就欧了
 

3、error:  Cannot GET /rooms      除了根目录其他所有路径都访问不到

     cause:  此时路由实际是由服务器处理的，比如webpack-dev-server，它根据你访问的路径返回对应的资源，而我们的目的是要做前端路由，希望拿到这个控制权，所以期望情况应该是不管访问什么路径，实际上都是返回这个SPA页面

     fix: 修改webpack配置文件，其他类型服务器同理应该配置404时回滚到首页

    devServer: {
    	historyApiFallback: true
    },

4、加了路由之后如何向子组件传递props数据

// 添加路由前
// 父组件的render中返回子组件，并传递数据


// 基础路由写法
// 但是这样似乎没有可以直接传递数据的方式

	
		 
	



//  es6属性合并与展开
// 在父组件中添加路由，形成了父组件->路由组件->子组件的传递过程，
// 其中路由到子组件本身会传递一个props包含路径匹配的一些信息，与我们之前的props冲突
// 可以合并属性后再给子组件


    
		{
		    let _props = Object.assign({data: this.state.roomsdata}, props);
				return 
		}}/> 
					
    

5、访问二级以上路由时页面读取的bundle.js和css文件路径是从二级目录查找的，所以取不到

fix：webpack的配置（path/publicPath/contentBase）

    output: {
    	path: path.resolve(__dirname, '../dist'),
        publicPath: '/',
        filename: 'bundle.js'
	},
    devServer: {
    	historyApiFallback: true,
    	contentBase: '../dist/'
    },

运行dev-server的时候会有提示

Project is running at http://localhost:8080/
webpack output is served from /dist/
Content not from webpack is served from ../dist/
404s will fallback to /index.html