Как я могу условно визуализировать определенные разделы HTML в зависимости от маршрута

Question

Я использую React для этого проекта.

У меня есть раздел Help на моем веб-сайте. Этот раздел справки содержит более 50 статей.Если вы переходите к /help-open-account, я хочу визуализировать некоторые html, а если я иду к /fraud, я хочу отображать другое html, то это все динамическое содержимое, поэтому используется один и тот же файл js, поэтому я хочу рендерить в зависимостипо ссылке.

Я знаю, как использовать условные операторы, но как я могу использовать текущий URL-адрес в качестве оператора, например path="/(?!help--lostMyCard)", если он в данный момент находится на этом URL-адресе, а затем отображать содержимое этого содержимого вместо x содержимого.

Файл app.js имеет следующий код ->

<BrowserRouter>
    <Switch>
       <Route path="/" exact component={HelpSupport} />
       <Route to="/help-articles" component={HelpArticles} />
    </Switch>
</BrowserRouter>

Будет ли приведенный выше код единственным способом условного отображения содержимого?Поскольку это рендеринг полных компонентов, и я хотел условно отобразить в них подкомпоненты.

Просто чтобы уточнить, я знаю, как использовать маршруты и т. Д., Но это не вопрос, вопрос в том, когда вы находитесь вкомпонент, например, вы находитесь в компонентах справки, могу ли я условно отображать содержимое в зависимости от моего маршрута и если да, то как?

Итак, HelpfulArticles IХотите отрендерить, что если мой маршрут X, но если мой маршрут Y, то отрендерить этот другой компонент?

Answer 1

если я правильно понял, вы хотите добавить больше маршрутов в зависимости от вашего пути:

Здесь, скажем, help-article содержит подстраницы, которые могут иметь различный HTML для отображения.

<BrowserRouter>
<Switch>
   <Route path="/" exact component={HelpSupport} />
   <Route path="/help-articles/:subpage?" component={HelpArticles} />
</Switch>

ТАК первым добавить необязательный параметр подстраницы.

Тогда в вашем Методе справки метод рендеринга компонента:

return {

 const {match} = this.props;
 const {params} = match;

  if(!params.subpage) {
    return <div> no subpage routes</div>
  }else if(params.subpage === "fruits") {
    return <FruitsHelper>
  } else if(params.subpage === "veg") {
    return <VegsHelper>
  }
}

Answer 2

обновите код здесь,

<BrowserRouter>
    <Switch>
       <Route path="/" exact component={HelpSupport} />
       // not `to`, it is `path`
       <Route path="/help-articles" component={HelpArticles} />
    </Switch>
</BrowserRouter>

Теперь вы можете обновить HelpArticles компонент, как показано ниже,

import React, { Component } from "react";
import List, { LostMyCard, LockedAccount } from "../custom/help";

class HelpArticles extends Component {

  _renderArticle() {
    const { location: { pathname } } = this.props;

    // render the components by comparing the url, here you can use switch too.

    if ((pathname || "").includes("lostMyCard")) {
      return <LostMyCard />
    }

    if ((pathname || "").includes("locked-account")) {
      return <LockedAccount />
    }

    // if no case is match then default component for listing the articles.
    return <List />

  }

  render() {

    return (
      <React.Fragment>
        {this._renderArticle()}
      </React.Fragment>
    )
  }
}


export default HelpArticles;

Answer 3

Я вижу, что вы хотите получить доступ к информации о маршруте в компоненте.

Кажется, что то, что вы ищете, уже решено здесь Как получить текущий маршрут в реакции-маршрутизаторе 2.0.0-rc5

Для получения дополнительной информации - Кто-то может разобраться со ссылкой здесь https://reactjs.org/docs/conditional-rendering.html в дополнение к указанной выше ссылке на stackoverflow, которую я упомянул в этом комментарии, чтобы полностью решить такую ​​проблему.