react-router-dom5默認路由思路

在react-router-dom5取消了IndexRoute這個默認路由的組件,這樣在最新的react-router-dom5中默認路由便成了必須要解決的問題,不然在某些路由結構複雜的的項目中首頁地址需要類似http://localhost/admin這樣寫法比較不好看雖然功能可以實現。
react-router-dom還有另一個組件Redirect組件

<BrowserRouter>
            <ul>
              <li>
                <Link to="/pageOne">pageOne</Link>
              </li>
              <li>
                <Link to="/pageTwo">pageTwo</Link>
              </li>
            </ul>
            <div>
              {/* Switch從上往下匹配直到匹配到爲止 */}
              <Switch>
                <Route path="/pageOne" render={() => 
                  <PageOne>
                    <Route exact path="/pageOne" component={PageOneChildOne}/>
                    <Route path="/pageOne/PageOneChildTwo" component={PageOneChildTwo}/>
                  </PageOne>
                }/>
                <Route path="/pageTwo" render={() => 
                  <PageTwo>
                    <Route exact path="/pageTwo" component={PageTwoChildOne}/>
                    <Route path="/pageTwo/PageOneChildTwo" component={PageTwoChildTwo}/>
                  </PageTwo>
                }/>
                <Redirect exact to="/pageOne" from='/' />
                <Route path="*" component={Hook}></Route>
              </Switch>
            </div>
          </BrowserRouter>

讓路徑爲‘/’的路由重定向到pageOne這個首頁,這樣就解決了默認路由的問題了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章