如何在React Router中将DefaultRoute设置为另一个路由

Question

我有以下几点：

  <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <DefaultRoute handler={SearchDashboard} />
  </Route>

使用DefaultRoute时，SearchDashboard渲染不正确，因为任何*仪表板都需要在仪表板中渲染。

我想为我的默认路线内的"应用程序"路由指向路由"搜索仪表板"。这是我可以用React路由器做的事情吗，或者我应该为此使用普通的Javascript（页面重定向）？

基本上，如果用户转到主页，我希望将其发送到搜索仪表板。所以我想我正在寻找一个与窗口相当的React路由器功能。地方替换（“mygreathostname.com/#/dashboards/searchDashboard”）




Answer 1

我错误地试图创建一个默认路径：

<IndexRoute component={DefaultComponent} />
<Route path="/default-path" component={DefaultComponent} />

但这会创建两个不同的路径来渲染相同的组件。这不仅毫无意义，而且可能会导致UI出现问题，例如，当您设计

创建默认路由（不是索引路由）的正确方法是使用

<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />

这是基于反应路由器1.0.0。看https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js.

Answer 2

使用

如果您不希望用户能够刷新站点或发送URL，请使用以下选项：

<Route exact path="/" render={() => (
    <Redirect to="/searchDashboard"/>
)}/>

如果searchDashboard在登录之后，请使用此选项：

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/searchDashboard"/>
  ) : (
    <Redirect to="/login"/>
  )
)}/>

Answer 3

您可以使用重定向而不是默认路由

<Redirect from="/" to="searchDashboard" />

更新2019-08-09以避免刷新问题，请改用此选项，多亏了Ogglas

<Redirect exact from="/" to="searchDashboard" />