Javascript 以编程方式将路由注入JSX路由器交换机语句

我一直试图将一些

JSX

路由注入路由器交换机语句，但没有成功。 基本上，我试图能够在不同的场景中重用方法

commonRoutes

，这样我就不必重复自己的操作了。。。 然而，当我注入如图所示的路由时，路由的行为并不像预期的那样，多个路由将同时触发，而不是有条件地触发。。。 希望代码清楚地说明了我要做的事情：

第一次尝试：

class App extends Component {
  commonRoutes() {
    return (
      <Switch>
        <Route path="/route1" component={Component1} />,
        <Route path="/route2" component={Component2} />,
        <Route path="/route3" component={Component3} />,
      </Switch>
    );
  }

  app() {
    return (
      <React.Fragment>
        <Header />
        <div className="app-content">
          <Switch>
            <Redirect exact from="/" to="/folder" />,
            {this.commonRoutes()},
            <Route path="*" component={NotFound} />
          </Switch>
        </div>
        <Footer />
      </React.Fragment>
    );
  }

  render() {
    let content = '';

    if (this.props.component === ComponentList.COMPONENT_APP) {
      return this.appFrame(this.app());
    } 

    if(this.props.component === ComponentList.COMPONENT_FOLDER) {
      return this.appFrame(this.folder());
    } 

    if (this.props.component === ComponentList.COMPONENT_EVENT) {
      return this.appFrame(this.event());
    }

    return content;
  }

  appFrame(content) {
    return (
      <React.Fragment>
        <CssBaseline/>
        <NotSupported  support={[{ name: 'ie', minSupport: 11 }]}/>
        <Favicon url={`${AppConfig.CONTEXT}favicon.ico`}/>
        <MuiThemeProvider theme={theme}>
          {content}
        </MuiThemeProvider>
      </React.Fragment>
    );
  }
  //... code
}

类应用程序扩展组件{
公共路线（）{
返回(
,
,
,
);
}
app（）{
返回(
,
{this.commonRoutes（）}，
);
}
render（）{
让内容=“”；
if（this.props.component===ComponentList.component\u APP）{
返回this.appFrame（this.app（））；
} 
if（this.props.component===ComponentList.component\u文件夹）{
返回此.appFrame（this.folder（））；
} 
if（this.props.component===ComponentList.component\u事件）{
返回this.appFrame（this.event（））；
}
返回内容；
}
appFrame（内容）{
返回(
{content}
);
}
//…代码
}

第二次尝试：

class App extends Component {
  commonRoutes() {
    return [
      <Route path="/route1" component={Component1} />,
      <Route path="/route2" component={Component2} />,
      <Route path="/route3" component={Component3} />
    ];
  }

  app() {
    return (
      <React.Fragment>
        <Header />
        <div className="app-content">
          <Switch>
            <Redirect exact from="/" to="/folder" />,
              {this.commonRoutes()},
            <Route path="*" component={NotFound} />
          </Switch>
        </div>
        <Footer />
      </React.Fragment>
    );
  }
}

类应用程序扩展组件{
公共路线（）{
返回[
,
,
];
}
app（）{
返回(
,
{this.commonRoutes（）}，
);
}
}

想到的另一种方法是使用带有键的对象来存储JSX路由，并使用

map

循环，但多次尝试也没有奏效

我感谢任何帮助或指导。

首先

let content = ''
if (...) {
  return this.appFrame(this.app());
} 
...
return content

前面的代码可以工作，但不是您期望的方式。您试图在条件匹配后返回内容。这只需返回

This.appFrame（…）

现在，这正是你所期待的。它将值分配给

内容

，最后返回

内容

现在，针对您的问题，您应该使用

exact

props只返回所需的组件：

commonRoutes() {
    return (
      [
        <Route exact path="/route1" component={Component1} />,
        <Route exact path="/route2" component={Component2} />,
        <Route exact path="/route3" component={Component3} />
      ]
    );
  }

---

render函数执行以下操作

返回this.appFrame（this.app（））

appFrame

返回包装在几个常见JSX指令中的内容，但这部分代码没有按预期工作，并且没有错误，所有路由都呈现，switch语句被忽略。还有路由之间的逗号呈现，这很有趣…没有乐趣相同的事情谢谢你，我一开始确实尝试过这个（没有提到对不起），当我这样做的时候，我得到了非常奇怪的行为，好像switch语句因为这样做而中断了，而交换机中的所有逗号都呈现了，好像所有路由都呈现了一样。。。而且开关被忽略了编辑做了谢谢。。。react要求我为每个数组元素添加一个键属性，仅此而已。它很管用，谢谢！

commonRoutes() {
    return (
      [
        <Route exact path="/route1" component={Component1} />,
        <Route exact path="/route2" component={Component2} />,
        <Route exact path="/route3" component={Component3} />
      ]
    );
  }

<Route path="*" component={NotFound} />
{/* -----^^ not required react router 4 */}