Question

我建立了一个反应组件来确定不同的路线这是我的Switch组件的来源

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文件中创建一个函数，在switch组件中添加调用它但它失败了我试图制作一个SurveysSwitch组件并导出/导入它但它也失败了。任何方法？ PS：我是webdev的新手

Answer 1

我认为您需要做的就是：

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() }替换为<Surveys />。

将反应路由组件拆分为两个

1 个答案: