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

我有以下内容：

  <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时，由于任何* Dashboard需要在Dashboard中呈现，因此SearchDashboard呈现不正确。

我想在“应用”路由内将DefaultRoute指向路由“ searchDashboard”。这是我可以使用React Router进行的操作，还是应该为此使用常规Javascript（用于页面重定向）？

基本上，如果用户转到主页，我想将其发送给搜索仪表板。所以我想我正在寻找一个等效于React Router的功能window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

您可以使用Redirect代替DefaultRoute

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

更新2019-08-09为避免刷新问题，请改用此，这要感谢Ogglas

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

使用的问题<Redirect from="/" to="searchDashboard" />是，如果您使用其他URL，例如/indexDashboard，如果用户单击刷新或获得发送给他们的URL，则/searchDashboard无论如何该用户都将被重定向到。

如果您不希望用户刷新站点或发送URL，请使用以下命令：

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

如果searchDashboard在登录后使用此命令：

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

我错误地尝试使用以下方法创建默认路径：

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

但这会创建呈现相同组件的两条不同路径。这不仅没有意义，而且会导致UI出现故障，即，当您<Link/>基于样式元素时this.history.isActive()。

创建默认路由（不是索引路由）的正确方法是使用<IndexRedirect/>：

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

这是基于react-router 1.0.0的。参见https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js。

乔纳森的答案似乎对我没有用。我正在使用React v0.14.0和React Router v1.0.0-rc3。这样做：

<IndexRoute component={Home}/>。

因此，在马修的案子中，我相信他会想要：

<IndexRoute component={SearchDashboard}/>。

来源：https : //github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

import { Route, Redirect } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

这样可以使您在本地主机上加载服务器时将您重定向至/ something

更新：2020

无需使用重定向，只需在 path

例：

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />

我遇到了类似的问题；如果没有路由处理程序匹配，我想要一个默认的路由处理程序。

我的解决方案是使用通配符作为路径值。即，还要确保它是您的路线定义中的最后一个条目。

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>

对于即将进入2017年的用户，这是具有以下特点的新解决方案IndexRedirect：

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

 <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>
    <Redirect from="/*" to="/" />
  </Route>

首选方法是使用React Router的IndexRoutes组件

您可以这样使用它（取自上面链接的react router文档）：

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>

从旧路由器重定向到新路由器后，您可以使用它来重定向特定的URL和呈现组件。

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>