使用React-Router遇到的那些坑

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>
相關文章
相關標籤/搜索