React-router - 加載時重定向？

Question

我是React開發新手，我不確定如何處理此問題。

我有一個航線簡單的應用程序，它看起來像這樣：

<Router> 
    <div> 
     <Route path="/" component={MainComponent} /> 
     <Route path="/dashboard" component={DashboardComponent} /> 
     <Route path="/users" component={UsersComponent} /> 
     <Route path="/admin" component={AdminComponent} /> 
    </div> 
</Router> 

當我去爲localhost：3000 /對myApp/index.html的我MainComponent如預期的載荷，它擁有該網站的主要佈局，導航等等。

然後，我要點擊「控制面板」，切換到DashboardComponent，「用戶」移動到UsersComponent和「管理」加載AdminComponent，這些都是裝旁邊的導航從MainComponent。

所以它是這樣的：

localhost:3000/myApp = MainComponent 
localhost:3000/dashboard = MainComponent + DashboardComponent 
localhost:3000/users = MainComponent + UsersComponent 
localhost:3000/admin = MainComponent + AdminComponent 

我想實現的是從來沒有加載MainComponent單獨（因爲它擁有什麼除外導航），但負載DashboardComponent它，所以一切都將與之前的工作稍微改變：

localhost:3000/myApp = MainComponent + DashboardComponent 

所以我想我想加載我的MainComponent，然後儀表板在初始化。如果URL自動從index.html更改爲/儀表板，它會非常好。

我試圖做這樣的事情在我MainComponent.jsx：

componentWillMount() { 
    <Redirect to="/dashboard" /> 
    console.log("It works!"); 
} 

但它什麼都不做，我覺得路由器從第一個例子中Application.jsx只是覆蓋它。

我想我可能做錯了什麼，因爲我覺得它是路由器最基本的東西之一，但我找不到任何答案和任何文檔中的任何幫助我的地方。任何提示？

tl; dr我想要localhost:3000/myApp/index.html重定向我localhost:3000/dashboard當應用程序啓動（我認爲它應該足以讓路由器加載什麼正確的組件）。

重新路由什麼也不做（沒有錯誤，但路線是不會改變）：

<Router> 
     <div> 
      <Route path="/" component={MainComponent} /> 
      <Route path="/dashboard" component={DashboardComponent} /> 
      <Route path="/users" component={UsersComponent} /> 
      <Route path="/admin" component={AdminComponent} /> 
      <Route exact path="/" component={() => <Redirect to={DashboardComponent} /> } /> 
     </div> 
    </Router> 

Answer 1

你應該用MainComponent包裝你的路線和Switch包裹，並允許'/'顯示DashboardComponent

<Router history={history}> 
    <MainComponent> 
    <Switch> 
     <Route exact path="/" component={DashboardComponent} /> 
     <Route exact path="/dashboard" component={DashboardComponent} /> 
     <Route exact path="/users" component={UsersComponent} /> 
     <Route exact path="/admin" component={AdminComponent} /> 
    </Switch> 
    </MainComponent> 
</Router> 

或者如果您不希望'/'顯示儀表板，那麼您將使用Redirect：

<Router history={history}> 
    <MainComponent> 
    <Switch> 
     <Redirect exact from="/" to="/dashboard" /> 
     <Route exact path="/dashboard" component={DashboardComponent} /> 
     <Route exact path="/users" component={UsersComponent} /> 
     <Route exact path="/admin" component={AdminComponent} /> 
    </Switch> 
    </MainComponent> 
</Router> 

請注意：你需要把this.props.children在MainComponent的render方法。

---

或者，你可以把裏面<Switch>...</Switch>您MainComponent：

路由器

<Router history={history}> 
    <Switch> 
    <Redirect exact from="/" to="/dashboard" /> 
    <MainComponent /> 
    </Switch> 
</Router> 

MainComponent

class MainComponent extends React.Component { 
    ... 

    render() { 

     return <span> 
      //Navigation content here.... 

     <Switch> 
      <Route exact path="/dashboard" component={DashboardComponent} /> 
      <Route exact path="/users" component={UsersComponent} /> 
      <Route exact path="/admin" component={AdminComponent} /> 
     </Switch> 
     </span> 

    } 

} 

頁

有用的鏈接：

• 開關：https://reacttraining.com/react-router/web/api/Switch
• 重定向：https://reacttraining.com/react-router/web/api/Redirect