web-dev-qa-db-ja.com

React-router：ルートが変更されても、一度マウントされたコンポーネントをルートからアンマウントしないでください

Reactいくつかのルートを宣言するアプリケーションがあります：

     <Switch>
      <Route exact path={'/'} render={this.renderRootRoute} />
      <Route exact path={'/lostpassword'} component={LostPassword} />
      <AuthenticatedRoute exact path={'/profile'} component={Profile} session={session} redirect={'/'} />
      <AuthenticatedRoute path={'/dashboard'} component={Dashboard} session={session} redirect={'/'} />
      <AuthenticatedRoute path={'/meeting/:meetingId'} component={MeetingContainer} session={session} redirect={'/'} />
      <Route component={NotFound} />
    </Switch>

（AuthenticatedRouteは、セッションをチェックし、<Route component={component} />または<Redirect to={to} />を呼び出すが、最後にcomponentメソッドが呼び出される）ダムコンポーネントです）

ルート変更時に基本的に各コンポーネントがマウント/アンマウントされる場所。多くのことを行うDashboardルートのアスペクトexceptを維持したいと思います。ダッシュボードではなく一度アンマウントします（会議ページに到着したため、まだダッシュボードをマウントする必要はないとします）が、一度ダッシュボードをロードすると、プロファイルページ、会議などに戻ったときに、戻ってきます。ダッシュボードでは、コンポーネントを再度マウントする必要はありません。

render または子がコンポーネントの代わりに解決策である可能性があることをReact-routerのドキュメントで読みましたが、ルートを子と混合し、その他をコンポーネントと混合できますか？私は多くのことを試みましたが、renderまたはchildrenを使用していても、ダッシュボードコンポーネントがまだマウント/アンマウントしています。

ご協力いただきありがとうございます

reactjsreact-routerreact-reduxreact-router-dom
12
guillaumepotier

Switchコンポーネントは、単一のルートのみをレンダリングします。最も早い一致が優先されます。 Dashboardコンポーネントはその中にあるため、別のルートが一致するたびにアンマウントされます。これをRouteを外側に移動すると、renderまたはchildrenで意図したとおりに機能します。

13
hazardous