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放入MainComponent的render方法中。

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

React-router - 加载时重定向？

React-router - redirect on load?

reactjs

react-router-v4