スプリット2

Question

内のルーティングコンポーネントを反応させ、私はここで 明確に異なるルートに反応するコンポーネントを構築しましたが、私のスイッチコンポーネント

function Switch() { 
    return (
    <Router history={hashHistory}> 
     <Route path="/" component={App}> 
     /* 
     ---- Routes on the Surveys List --------------------------- 
     */ 
     <Route path="/examples/surveyslist" component={SurveysList}> 

      <Route path="/examples/summary" component={Summary} /> 
      <Route path="/examples/survey" component={SurveyResult}> 
      <Route path="/examples/survey/resultview" component={ResultView} /> 
      <Route 
       path="/examples/survey/surveyproto" 
       component={SurveyProto} 
      /> 
      </Route> 
      <Route path="/examples/survey/edit" component={SurveyForm} /> 
     </Route> 
     /* ------------------- SurveysList ------------------------- */ 
     <Route path="/examples/employees" component={Employees} /> 
     </Route> 
    </Router> 
); 
} 

の源であるこれがうまく機能します！私がやりたい何 は可読性 を高めるために、コメント行の間のすべての部分を抽出することである私は同じのjsファイル内の関数は、スイッチコンポーネントの内部でそれを呼び出す追加作ってみましたが、それは私がSurveysSwitchコンポーネントを作ってみました を失敗しましたそれをエクスポート/インポートしても失敗しました。 任意の方法？ PS：

function surveys() { 
    return (
     <Route path="/examples/surveyslist" component={ SurveysList }> 
      <Route path="/examples/summary" component={ Summary } /> 
      <Route path="/examples/survey" component={ SurveyResult }> 
       <Route path="/examples/survey/resultview" component={ ResultView } /> 
       <Route 
        path="/examples/survey/surveyproto" 
        component={ SurveyProto } 
       /> 
      </Route> 
      <Route path="/examples/survey/edit" component={ SurveyForm } /> 
     </Route> 
    ); 
} 

function routes() { 
    return (
     <Router history={ hashHistory }> 
      <Route path="/" component={ App }> 
       { this.surveys() } 
       <Route path="/examples/employees" component={ Employees } /> 
      </Route> 
     </Router> 
    ); 
} 

か、あなたがコンポーネント

class Surveys extends React.Component { 
    render() { 
     return (
      <Route path="/examples/surveyslist" component={ SurveysList }> 
       <Route path="/examples/summary" component={ Summary } /> 
       <Route path="/examples/survey" component={ SurveyResult }> 
        <Route path="/examples/survey/resultview" component={ ResultView } /> 
        <Route 
         path="/examples/survey/surveyproto" 
         component={ SurveyProto } 
        /> 
       </Route> 
       <Route path="/examples/survey/edit" component={ SurveyForm } /> 
      </Route> 
     ); 
    } 
} 

を好むならば、あなたが{ this.surveys() }に代わる：私は

Answer 1

をwebdevするために非常に初心者です、私はすべてを行う必要があると思います<Surveys />。