Reactjs 反应路由器-负载重定向？

我是一个新的开发人员，我不知道如何处理这个问题

我有一个简单的路由应用程序，它看起来像这样：

<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 = MainComponent 
localhost:3000/dashboard = MainComponent + DashboardComponent
localhost:3000/users = MainComponent + UsersComponent
localhost:3000/admin = MainComponent + AdminComponent

我想要实现的是永远不要单独加载

main组件

（因为它不包含任何内容，除了导航），而是使用它加载仪表板组件，这样一切都可以像以前一样工作，只需稍作更改：

localhost:3000/myApp = MainComponent + DashboardComponent

所以我想我要加载我的主组件，然后在init上加载仪表板。如果URL也自动从index.html更改为/dashboard，那就太好了

我在MainComponent.jsx中尝试过这样做：

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

---

您应该使用

main组件

包装路由，并允许

'/'

显示

仪表板组件

<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>

请注意：您需要将

这个.props.children

放在

主组件的
渲染方法中


或者，您可以将
…
放在
主组件中
：

路由器



主要成分

class MainComponent扩展了React.Component{
...
render（）{
返回
//导航内容在此。。。。
}
}

有用链接：


开关：
重定向：
有什么问题吗？
？我假设您使用的是react router v.4，我相信您可以创建一个呈现重定向组件的路由
}/>
@daniel如果我正确理解路由，它将只加载仪表板组件而不加载MainComponent，并且所有其他组件将加载到仪表板组件而不是MainComponent上。@如果无法使其工作，请检查编辑的问题。我想我有一些逻辑问题，因为其他人似乎没有这种问题。文档根本无法解释我的情况。我尝试了使用Switch和Redirect的第一种方法，我很确定问题出在我的URL上。我的应用程序位于：
http://localhost/myApp/index.html
，我觉得
重定向精确自=“/”
不适用于该URL，对吗？我该怎么修？它像以前一样工作，一切都很好，但在ap init上它只加载main组件，没有仪表板组件&没有重定向。对于您的开发，您应该使用像
webpack
和
webpack dev server
这样的捆绑程序，它将在一个端口托管它，例如
localhost:8080
，然后
'/'
将是正确的。我认为你不会让它在你的
index.html
的完整路径中工作。是否将
历史记录
对象传递给
路由器
？请参阅文档：。如果无法将URL设置为端口，则可以尝试使用
HashRouter
。
<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>

<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>

<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>

    }

}