React Router 4：ルートルートと異なるテンプレート

Question

私は新しいプロジェクトで反応ルータ4を試していました。私が遭遇した小さな問題は、 "サブ"ルートが親ルートから継承しないようにする方法です。

ナビゲーションとダッシュボードをレンダリングするルートルート/のページがあります。ユーザープロファイルを表示し、テンプレートをルートルートと共有する「/ profile」がありますが、ログされていない場合はユーザーを/loginにリダイレクトしますRR4の構造では、ルートルートのテンプレートがログインの子ルートに反映されますが、私はこの動作に乗るためにいくつかの方法がありますが、それらはすべてハッキーに見えます。

ない最善のアプローチはどうあるべきかを確認してください。..

<Router> 
    <div> 
     <Route path='/' component={() => <h1>Home Page</h1> }/> 
     <Route path='/login' component={() => <h1>Logins</h1> }/> 
     <Route path='/profile' component={() => <h1>Profile</h1> }/> 
    </div> 
</Router> 

どちらもログインとプロフィールの表示Home Pageが、私は唯一それを行うためにプロフィールたいです。

Answer 1

あなたは

<Router> 
    <div> 
     <Switch> 
     <Route path='/' component={<HomeTemplate/>}/> 
     <Route path='/login' component={() => <h1>Logins</h1> }/>   
     </Switch> 
    </div> 
</Router> 

はHomeTempateコンポーネントを作成し、テンプレートを導き出すために必要なすべてのRoute秒でSwitchを追加し、次のようにあなたのアプリケーションコンポーネントでSwitchを追加する必要があります。リアクトルータのドキュメント（https://reacttraining.com/react-router/web/api/Switch）から

<Header/> 
<TemplateSpecificComponents/> 
<Switch> 
     <Route path='/profile' render={() =><h1>Profile</h1> }/> 
     ... 
</Switch> 

：

<Switch>は、それが排他的にルートをレンダリングするという点で独特です。対照的に、場所に一致するすべての<Route>が包括的に表示されます。

編集：プロフィールにHomeTemplateを表示するように更新されましたが、ログインには反映されません。

Answer 2

この問題を解決する方法の1つは、HOCを使用することです。たとえば、

let template = function(WrappedComponent) { 
    return class extends React.Component { 
    render() { 
     return (
     <h1>Home Page</h1> 
     <WrappedComponent {...this.props}/> 
    ) 
    } 
    } 
} 

<Router> 
    <div> 
     <Switch> 
     <Route path='/' component={ template() } exact/> 
     <Route path='/login' component={() => <h1>Logins</h1> }/> 
     <Route path='/profile' render={ template(<h1>Profile</h1>) }/> 
     </Switch> 
    </div> 
</Router>