React-Router - ошибка при использовании <Switch>вне массива карт маршрутов

Question

Я использую React router для динамического создания маршрутов из массива.Если ни один из путей не совпадает, то я хочу показать страницу 404.

Проблема, с которой я столкнулся, заключается в том, что я вижу ошибку ниже в консоли при переносе карты массива с <Switch>:

Предупреждение: React не распознает пропелу computedMatch на элементе DOM.Если вы намеренно хотите, чтобы он отображался в DOM в качестве пользовательского атрибута, вместо этого пишите его строчными буквами computedmatch.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

См. Образец моего кода ниже:

const sections = [
    'section1',
    'section2',
    'section3'
];

<Switch>

    {/* If only /section/ is loaded in the browser, redirect to the first section */}
    <Route exact path="/section" render={() => (
        <Redirect to="/section1/home" />
    )}/>

    {/* Map through the sections array */}
    {this.state.sections.map((section, sectionIndex) => (
        <div key={sectionIndex}>
            <Route path={"/section/" + section + "/home"} render={() => (
                <Section
                    testProp={'test'}
                />
        )}/>
        </div>
    ))}

    {/* 404 Page */}
    <Route component={NoMatch} />

</Switch>

Если я вручную создаю эти разделыкак отдельные <Route> компоненты, а затем обертывающие <Switch> вокруг них, ошибка не существует, поэтому я предполагаю, что это как-то связано с картой массива.

Я не могу вручную создать все разделы, так как мыв конечном итоге может иметь сотни разделов, которые требуют путь маршрута.Мне также нужно иметь возможность отправлять несколько реквизитов в компонент <Section>, поэтому я использую опору render() в <Route>

Я, вероятно, здесь упускаю что-то простое.Может ли кто-нибудь любезно посоветовать?Большое спасибо.

Answer 1

Я думаю, что вам нужно использовать match в вашем URL, поскольку разделы одинаковы, и единственное отличие состоит в том, что там есть имена.

Рассмотрите возможность использования одного маршрута с Container для загрузкиразделы:

<Switch>
    <Route exact path="/section/:section/home" component={SectionContainer} />
    <Route component={NotFoundPage} />
  </Switch>

В SectionContainer вы можете получить доступ к section из url следующим образом:

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

или const activeSection = this.props.match.params.section;

Таким образом, вы сможете получить из своего бэк-энда информацию этого раздела.

Более того, если вам нужно передать некоторые новые реквизиты в свой контейнер, вы можете сделать это следующим образом:

const SpecialSectionContainer= (props) => (
  <SectionContainer
    special="this section is special"
    {...props}
  />
);

, а затем <Route exact path="/section/:section/special/home" component={SpecialSectionContainer} />.

Оказавшись в вашем разделе «Контейнер», вы можете переключать известные разделы для загрузки соответствующих функций, и, если вы используете API управления состоянием, например, redux, все зависит от вашего редуктора / саги.решить, какую именно реализацию функции вызывать в зависимости от загруженного раздела.

Надеюсь, это решит вашу проблему.

С уважением.

РЕДАКТИРОВАТЬ

например, используя redux, вы можете сделать следующее:

componentWillMount = () => {
    this.props.loadSection(this.props.match.params.section);
  };

это отправит действие, которое будет перехвачено вашим промежуточным программным обеспечением с побочными эффектами (в основном thunk или saga), и выполнит вызов API, чтобы получить ваши данные и сохранить их в store.и ваш SectionContainer, наконец, легко загрузит их и передаст функциональному компоненту just display them.

Answer 2

Из документа React

Предупреждение unknown-prop сработает, если вы попытаетесь отобразить элемент DOM с пропой, которая не распознается React как допустимый атрибут / свойство DOM.Вы должны убедиться, что ваши DOM-элементы не имеют паразитных подпорок, плавающих вокруг.

В этом случае ваш ребенок, поэтому нестандартные реквизиты computedMatch передаются на нативный dom-узел, поэтому React дает вамздоровое предупреждение.Таким образом, использование <> или отменит предупреждение.