web-dev-qa-db-ja.com

DefaultRouteをReactルーターの別のルートに設定する方法

私は次のものを持っています：

  <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ルーターでできることですか、それとも通常のJavascript（ページリダイレクト用）を使用する必要がありますか？

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

javascriptroutesreactjsurl-redirectionreact-router
61
Matthew Herbst

DefaultRouteの代わりにリダイレクトを使用できます

<Redirect from="/" to="searchDashboard" />
88
Jonatan Lundqvist Medén

<Redirect from="/" to="searchDashboard" />を使用する際の問題は、/indexDashboardなどの別のURLがあり、ユーザーがリフレッシュを押すか、URLを送信すると、ユーザーは/searchDashboardにリダイレクトされることです。

ユーザーがサイトを更新したりURLを送信したりできない場合は、次を使用します。

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

searchDashboardがログインの背後にある場合、これを使用します。

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

私は間違ってデフォルトパスを作成しようとしました：

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

ただし、これにより、同じコンポーネントをレンダリングする2つの異なるパスが作成されます。これは無意味であるだけでなく、UIに不具合を引き起こす可能性があります。つまり、this.history.isActive()に基づいて<Link/>要素をスタイリングしている場合です。

デフォルトルート（インデックスルートではない）を作成する正しい方法は、<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 を参照してください。

37
Seth

ジョナサンの答えは私には役に立たなかったようです。 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

10
dwilt

2017年に来る人にとって、これはIndexRedirectを使用した新しいソリューションです。

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>
3
Kevin Hernandez
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にリダイレクトされます。

2
user2785628
 <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>
2
user3889017

推奨される方法は、反応ルーターを使用することです IndexRoutes component

これは次のように使用します（上記にリンクされているリアクションルーターのドキュメントから取得）。

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

同様の問題に遭遇しました。一致するルートハンドラがない場合、デフォルトのルートハンドラが必要でした。

私の解決策は、パス値としてワイルドカードを使用することです。つまり、ルート定義の最後のエントリであることも確認してください。

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