以编程方式将路由注入 JSX 路由器开关语句

Question

我一直在尝试将一些 JSX 路由注入路由器 switch 语句，但没有成功。基本上我试图能够在不同的场景中重用 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
}

第二次尝试：

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

想到的另一种方法是使用带有键的对象来存储 JSX 路由并使用 map 循环，但多次尝试也没有成功。

感谢任何帮助或指导。

Answer 1

首先，

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

前面的代码有效，但不是您期望的方式。您正在尝试 return 条件匹配后的内容。这只是 return this.appFrame(...).

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

现在，这按您期望的方式工作。它将值分配给 content 最后 return content.

现在，对于您的问题，您应该使用 exact 属性来 return 仅需要的组件：

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

此外，确保在呈现元素数组时使用唯一 key。在您的情况下，它是 [<Route key={'unique-key'} />,...].

并从此处删除路径：

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

以编程方式将路由注入 JSX 路由器开关语句

Injecting routes programmatically into a JSX router switch statement

javascript

jsx

reactjs

react-router-v4