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はダッシュボード内でレンダリングする必要があるため、SearchDashboardは正しくレンダリングされません。

「app」ルート内のDefaultRouteがルート「searchDashboard」を指すようにしたいと思います。これはReact Routerでできることですか、それとも通常のJavascript（ページリダイレクト用）を使用する必要がありますか？

基本的に、ユーザーがホームページにアクセスした場合は、代わりに検索ダッシュボードに送信します。だから私は同等のReact Router機能を探していると思いますwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

DefaultRouteの代わりにRedirectを使用できます

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

Ogglasのおかげで、更新の問題を回避するために2019-08-09を更新してください。代わりにこれを使用してください

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

ただし、これにより、同じコンポーネントをレンダリングする2つの異なるパスが作成されます。この無意味ですが、あなたはスタイリングされた場合には、つまり、あなたの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>

推奨される方法は、反応ルーターのIndexRoutesコンポーネントを使用することです

次のように使用します（上記のリンクされた反応ルータードキュメントから取得）：

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