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

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

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

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

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

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

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

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

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

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

使用的问题<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"/>
  )
)}/>

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

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

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

您可以使用Redirect代替DefaultRoute

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

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

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