1.react-router版本升級很快,第一個路由demo就遇到了坑。javascript
react-router版本升級很快,目前爲止已經升級到了react-router4。因爲纔剛開始接觸react的路由,一搜react-router路由就搜到了react-router3文檔,按照文檔demo在本身搭建的react項目上始終是跑不起來,後來終因而發現react-router版本是4以上,原來是react-router沒對上號。html
2.是用BrowserRouter仍是HashRouter。html5
react-router4的文檔用的是BrowserRouter,照着文檔的demo寫,發現第一次路由過去的路徑能正常顯示,再刷新頁面就發現說找不到路徑了,這就納悶了,不知道哪裏出了問題。後來得知BroswerRouter是須要服務端配合的,服務端重定向到首頁,BrowserRouter是基於html5的pushState和replaceState的,不少瀏覽器不支持,存在兼容性問題。故最後選擇HashRouter.java
3.react-router的最外層路由只能有一個子元素react
路由結構定義以下:瀏覽器
<Router> <ul> <li><Link to="/" >Home</Link></li> <li><Link to="/detail/1" >Detail</Link></li> </ul> <Route exact path="/" component={Home}></Route> <Route path="/detail/:id" component={Detail}></Route> </Router>
會報以下錯誤:react-router
報錯是說<Router>只容許有一個子節點,故須要包一層div,以下component
<Router> <div> <ul> <li><Link to="/" >Home</Link></li> <li><Link to="/detail/1" >Detail</Link></li> </ul> <Route exact path="/" component={Home}></Route> <Route path="/detail/:id" component={Detail}></Route> </div> </Router>