を持っています。
<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のレンダリングが正しく行われません。
私は、"app"Route内のDefaultRouteがRoute "searchDashboard"を指すようにしたいと考えています。これはReact Routerでできることなのでしょうか、それとも通常のJavascript(ページのリダイレクト用)を使うべきなのでしょうか?
基本的には、ユーザーがホームページにアクセスした場合、代わりに検索ダッシュボードに誘導したいと考えています。つまり、window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");
と同等のReact Routerの機能を探しているのだと思います。
DefaultRouteの代わりにRedirectを使用することができます。
<Redirect from="/" to="searchDashboard" />
2019-08-09 更新 更新時の問題を回避するために、代わりにこの方法を使用します。
<Redirect exact from="/" to="searchDashboard" />
でデフォルトのパスを作ろうとしていたのが間違っていました。
<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}/>
.
ですから、Matthew'さんのケースでは、次のようにしたいと思います。
IndexRoute component={SearchDashboard}/>`としています。
出典: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md