reactjs - 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 按预期加载时，它包含网站的主要布局、导航等。

然后我必须点击“Dashboard”切换到DashboardComponent，“Users”移动到UsersComponent和“Admin”加载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 上加载仪表板。如果 URL 也自动从 index.html 更改为/dashboard，那就太好了。

我尝试在我的 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在 render MainComponent的方法| .

---

或者，你可以把 <Switch>...</Switch>在你的MainComponent :

路由器

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

主组件

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