Split eine reagieren Routing-Komponente in zwei

Question

ich eine Komponente auf bestimmte unterschiedliche Routen reagieren gebaut gut Hier ist die Quelle meiner Schalterkomponente

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> 
); 
} 

Das funktioniert! Was ich tun möchte, ist das gesamte Teil zwischen den Kommentarzeilen zu extrahieren, um die Lesbarkeit zu erhöhen Ich habe versucht, eine Funktion in der gleichen js-Datei hinzuzufügen, rufen Sie es innerhalb der Switch-Komponente, aber es ist fehlgeschlagen Ich habe versucht, eine UmfragenSwitch-Komponente und exportieren/importieren, aber es ist auch fehlgeschlagen. Irgendeine Methode? PS: Ich bin ein sehr Neuling

Answer 1

ich alles, was Sie tun müssen, denken WebDev ist:

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> 
    ); 
} 

oder, wenn Sie eine Komponente

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> 
     ); 
    } 
} 

bevorzugen, dann würden Sie { this.surveys() } ersetzen <Surveys />.