React-router - redirect on load？

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，然后在init上加载仪表板。如果网址也能自动从index.html更改为/dashboard，那就太好了。

我试着在我的MainComponent.jsx中做这样的事情：

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

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

我想我可能做错了什么，因为我觉得这是路由器最基本的事情之一，但我在文档中找不到任何答案和任何对我有帮助的东西。有什么提示吗？

我希望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方法中。

Alternatively，你可以把<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