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

所以我想我想在init上加载我的MainComponent然后加载仪表板。如果URL从index.html自动更改为/ dashboard，那将是非常好的。

我尝试在MainComponent.jsx中执行类似的操作：

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

但它什么也没做，我认为Application.jsx中第一个例子的路由器只是覆盖了它。

我想我可能做错了，因为我觉得它是路由器最基本的东西之一，但我找不到任何答案和文档中的任何内容可以帮助我。任何提示？

tl; dr我想让localhost:3000/myApp/index.html在app启动时重定向我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的{{1}}方法中。

或者，您可以将MainComponent放入<Switch>...</Switch>：

路由器

MainComponent

MainComponent

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

有用的链接：

切换：https://reacttraining.com/react-router/web/api/Switch
重定向：https://reacttraining.com/react-router/web/api/Redirect

React-router - 加载时重定向？

1 个答案: