csdn的編輯器終於能截圖了啊，比起之前試圖推薦的markdown編輯器，貼圖還是更好用，畢竟這裡是部落格不是文件^_^

     cause：return 後面的括號必須在同一行，如果(在下一行就會認為沒有返回東西

2、warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

// 這種寫法會認為是巢狀元件，在react-router v4中不再推薦這種巢狀，應該在業務元件中去寫各自的路由
<Route path='/' component={Login}>  <Route/> 	
	
// 改為自閉標籤就歐了
<Route path='/' component={Login}/> 
 

3、error:  Cannot GET /rooms      除了根目錄其他所有路徑都訪問不到

     cause:  此時路由實際是由伺服器處理的，比如webpack-dev-server，它根據你訪問的路徑返回對應的資源，而我們的目的是要做前端路由，希望拿到這個控制權，所以期望情況應該是不管訪問什麼路徑，實際上都是返回這個SPA頁面

     fix: 修改webpack配置檔案，其他型別伺服器同理應該配置404時回滾到首頁

    devServer: {
    	historyApiFallback: true
    },

4、加了路由之後如何向子元件傳遞props資料

// 新增路由前
// 父元件的render中返回子元件，並傳遞資料
<Rooms data={this.state.roomsdata} />

// 基礎路由寫法
// 但是這樣似乎沒有可以直接傳遞資料的方式
<Router>
	<Switch>
		<Route  path="/rooms" component={Rooms}/> 
	</Switch>
</Router>


//  es6屬性合併與展開
// 在父元件中新增路由，形成了父元件->路由元件->子元件的傳遞過程，
// 其中路由到子元件本身會傳遞一個props包含路徑匹配的一些資訊，與我們之前的props衝突
// 可以合併屬性後再給子元件

<Router>
    <Switch>
		<Route  path="/rooms" component={props=>{
		    let _props = Object.assign({data: this.state.roomsdata}, props);
				return <Rooms {..._props} />
		}}/> 
					
    </Switch>
</Router>

 

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