反應路由器-負載重定向？

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單獨加載MainComponent （因為它除了導航之外什么都不容納），而是隨其加載DashboardComponent，因此只要稍作更改，一切都將像以前一樣工作：

localhost:3000/myApp = MainComponent + DashboardComponent

所以我想我想加載我的MainComponent，然后在init上安裝儀表板。 如果URL也自動從index.html更改為/ dashboard，那就太好了。

我嘗試在MainComponent.jsx中執行以下操作：

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

但是它什么也沒做，我認為Application.jsx中第一個示例中的路由器會覆蓋它。

我想我可能做錯了什么，因為我覺得這是路由器最基本的事情之一，但是我找不到任何答案和文檔中對我有幫助的任何東西。 有什么提示嗎？

tl;博士，我希望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在render的方法MainComponent 。

---

或者 ，您可以將<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