web-dev-qa-db-ja.com

Reactでの動的ルーティングと静的ルーティングの利点

私は 静的vs動的ルーティング in React=ルーターについて読んでいます、そして、後者の利点を特定するのに苦労しています（v4がそれを選択した理由） ）。アプリケーション（静的）のすべてのルートと、各ルートがマップするコンポーネントをリストする利点を確認できます。これにより、特定のURLが与えられたときに何がレンダリングされるかを追跡できます。動的ルートに対する明確な利点。

どちらかと言えば、ルートアプリ要素から始めてルートをたどることなく、URLがどの状態にマップされるかを明確に確認する方法がないため、デメリットしか見ることができません（間違っているかもしれませんが）。

動的ルーティングはどのような状況に対処しますか？静的ルーティングよりも望ましいのはなぜですか（特にReactアプリ）である可能性があります）？

reactjsreact-routerreact-router-v4dynamic-routing
20
Andrei Khramtsov

動的ルーティング

反応するルーターから docs ：

ダイナミックルーティングとは、yourappがレンダリングするときに行われるルーティングを意味します、実行中のアプリ以外の構成や規則ではありません。

ルートをコンポーネントと考える

以前のバージョンのreact-router（v4より前）は、静的ルートを使用していました。これにより、次のようなアプリでルーティングが集中化されました。

<Router>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route onEnter={verifyUser} path='profile' component={Profile} />
      ...
    </Route>
</Router>

しかし、これは正確にReactの方法ではありません。 Reactコンポーネントベースのロジックを使用した構成に焦点を当てています。したがって、Routesを静的システムとして想像する代わりに、コンポーネントとして想像することができます。その背後。

したがって、任意のReactコンポーネントを使用する場合と同様に、Routeを使用できます。これにより、異なるコンポーネントをビルドするときにRouteコンポーネントを追加できます。これにより、ルーティングロジックを必要とするコンポーネントに分離できます。

ネスティングルート

Aboutコンポーネントは、すべてのルートを処理し、URLに基​​づいてUIの一部を条件付きでレンダリングできます（/about/jobまたは/about/lifeなど）。

もう1つ注意すべきことは、Routeコンポーネントは、一致するルートまたはnullのコンポーネントをレンダリングすることです。たとえば、次のRouteは、ルート/aboutおよびAbout（または何もない）のnullコンポーネントをレンダリングします。

<Route path='about' component={About} />

これは、Reactでコンポーネントを条件付きでレンダリングする方法にも似ています。

route === '/about' ? <About /> : null

ルート/about/jobまたは/about/lifeのAboutコンポーネント内に他のコンポーネントをレンダリングする必要がある場合、次のようにします。

const About = ({ match ) => (
    <div>
        ...
        <Route path={`${match.url}/job`} component={Job} />
        <Route path={`${match.url}/life`} component={Life} />
    </div>
)

動的インポートとコード分割

個人的には、コードスプリットを使用して動的インポートを使用している場合、コンポーネントに動的ルートを追加できるため、このアプローチの方が適していることもわかりました。例えば、

import Loadable from 'react-loadable';

const Loading = () => (
    <div />
);

const Job = Loadable({
    loader: () => import('./Job'),
    loading: Loading,
});

const Life = Loadable({
    loader: () => import('./Life'),
    loading: Loading,
});

...

render() {
    return (
        ...
        <Route path={`${match.url}/job`} component={Job} />
        <Route path={`${match.url}/life`} component={Life} />
    )
}

レスポンシブルート

動的ルーティングのもう1つの優れた使用例は、レスポンシブルートの作成です。これについては、 react router docs および推奨される読み取りで詳しく説明されています。これがドキュメントの例です：

const App = () => (
  <AppLayout>
    <Route path="/invoices" component={Invoices}/>
  </AppLayout>
)

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

docs を要約すると、動的ルーティングを使用してRedirectを大きな画面サイズに追加することがどれほど簡単で宣言的になるかに気付くでしょう。そのような場合に静的ルーティングを使用するのは非常に面倒で、すべてのルートを1か所に配置する必要があります。動的ルーティングを使用すると、ロジックが（コンポーネントのように）構成可能になるため、この問題が簡素化されます。

静的ルーティング

動的ルーティングでは簡単に解決できない問題がいくつかあります。 静的ルーティング の利点は、レンダリングの前にルートの検査と照合ができることです。したがって、特にサーバー側で便利です。反応ルーターチームは、 react-router-config と呼ばれるソリューションにも取り組んでいます。

React Router v4の導入により、一元化されたルート構成はなくなりました。次のようなアプリのすべての潜在的なルートについて知ることが有益なユースケースがいくつかあります。

  1. 次の画面をレンダリングする前に、サーバーまたはライフサイクルでデータをロードする
  2. 名前によるルートへのリンク
  3. 静的解析

これにより、動的ルーティングと静的ルーティングの両方の概要とそれらのユースケースが提供されることを願っています:)

12
Divyanshu Maithani

React-Routerのドキュメントによると：

dynamic routingと言うとき、実行中のアプリの外部の構成や慣習ではなく、アプリのレンダリング中に行われるルーティングを意味します。つまり、ほとんどすべてがReact Routerのコンポーネントです。

説明の明確さは、すべてのルートはアプリケーションの開始時に初期化されないこと、

React-router v3以下では、static Routesおよびすべてを使用しましたルートはトップレベルで初期化され、ネストは次のように実現されていました。

<Router>
    <Route path='/' component={App}>
      <IndexRoute component={Dashboard} />
      <Route path='users' component={Users}>
          <IndexRoute component={Home}/>
          <Route path="users/:id" component={User}/> 
      </Route>
    </Route>
</Router>

このAPIのセットアップでは、react-routerはReact（ライフサイクルなど）の一部を再実装していましたが、React使用することをお勧めします。

ダイナミックルートでは、次の利点が予見されるようになります。

ネストされたルート

動的ルーティングを使用したネストされたルートは、

const App = () => (
    <BrowserRouter>
        {/* here's a div */}
        <div>
        {/* here's a Route */}
        <Route path="/todos" component={Todos}/>
        </div>
    </BrowserRouter>
)

// when the url matches `/todos` this component renders
const Todos  = ({ match }) => (
    // here's a nested div
    <div>
        {/* here's a nested Route,
            match.url helps us make a relative path */}
        <Route
        path={`${match.path}/:id`}
        component={Todo}
        />
    </div>
)

上記の例では、/ todosがroute-pathに一致する場合にのみ、Todoコンポーネントがマウントされ、その後にのみRoute path /todos/:idが定義されています。

応答性の高いルート

React-routerのドキュメントには、このための良い使用例があります。

ユーザーが/invoices。アプリはさまざまな画面サイズに対応しており、ビューポートが狭いため、請求書のリストと請求書へのリンクdashboardのみを表示します。そこからさらに深くナビゲートできます。

ただし、大きな画面では、ナビゲーションが左側にあり、ダッシュボードまたは特定の請求書が右側に表示されます。

それゆえ /invoicesは大画面の有効なルートではないため、/invoices/dashboard。これが起こる可能性があるため、ユーザーはportait to a landscape mode。これは、動的ルーティングを使用して簡単に実行できます。

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

React Router'sでの動的ルートの使用、静的ルートではなくcomponentsについて考えてください。

コード分割

ウェブの大きな特徴の1つは、ユーザーがアプリ全体を使用する前にダウンロードする必要がないことです。コード分​​割は、アプリを段階的にダウンロードすることと考えることができます。 This is made possible with Dynamic Routing。

それがもたらす利点は、すべてのコードを一度にダウンロードする必要がないため、初期レンダリングが高速になることです。

ここは、アプリケーションのcodeSplittingのセットアップに役立つ良い記事です

構成可能な認証済みルートの作成

ダイナミックルーティングを使用すると、PrivateRoutes（認証を行うHOC）の記述も容易になり、ユーザーを認証して特定のルートへのアクセスを提供し、それ以外の場合はリダイレクトすることができます。この電話は私が非常に一般的に行ったものです

典型的なプライベートルートは次のようになります

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      fakeAuth.isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

として使用できます

<PrivateRoute path="/protected" component={Protected} />
4
Shubham Khatri