天天看點

react實戰之cnode—02視圖劃分及路由基本配置

1.視圖劃分

我們首先看一下cnode的官網

react實戰之cnode—02視圖劃分及路由基本配置

 經過分析之後發現可以劃分為五個子產品:首頁,教程,文章詳情,使用者資訊,關于。

是以我們再項目中添加以下代碼

react實戰之cnode—02視圖劃分及路由基本配置

2.路由基本配置

首先配置好路由,編寫以下代碼

react實戰之cnode—02視圖劃分及路由基本配置

然後我們進入入口檔案

react實戰之cnode—02視圖劃分及路由基本配置

接着修改App.js檔案代碼

react實戰之cnode—02視圖劃分及路由基本配置

運作項目的時候,報錯了

react實戰之cnode—02視圖劃分及路由基本配置

 在網上找到了解決方案

https://segmentfault.com/q/1010000017794269/a-1020000017860037

react實戰之cnode—02視圖劃分及路由基本配置

我這麼懶,當然是選擇後者了,hahahhahahaha 

npm start跑是跑起來,但是不跳轉。檢視控制台

react實戰之cnode—02視圖劃分及路由基本配置

打開控制台,該有的都有了,下一節元件完善了看還存不存在這個問題吧。~~~~(>_<)~~~~