Внедрение маршрутов программным способом в оператор переключения маршрутизатора JSX

Question

Я безуспешно пытался внедрить некоторые 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
}

Вторая попытка:

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

Предыдущий код работает, но не так, как вы ожидаете. Вы пытаетесь вернуть содержимое после выполнения условия. Это просто вернуть this.appFrame(...).

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

Теперь это работает так, как вы ожидаете. Он присваивает значение content и, наконец, возвращает content.

Теперь, к вашей проблеме, вы должны использовать exact реквизиты, чтобы вернуть только необходимый компонент:

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 */}