Arhn - архитектура программирования

Можно ли использовать useParams внутри App.js?

Добрый день, надеюсь, что я вас не побеспокою.

Подробности

У меня есть такой путь

localhost: 3000 / Project-1 / todo-1

и Switch of Route вот так

<Route path='/:project/:todo' component={Todo} />

Ожидаемый результат

Когда браузер находится в пути примера, я ожидал, что App.js также может получить объект params с помощью useParams, но показывает пустое значение. Я неправильно использовал крючок? Спасибо за ответы.

дополнительные детали

Я использовал useLocation, который возвращает что-то вроде пути, но это не моя цель, это должно быть что-то вроде

params: { 
  project: 'Project-1', 
  todo: 'todo-1 '
}

который возвращается с помощью useParams для упрощения извлечения значений проекта и задачи.

reactjs parameters react-hooks react-router-dom
03.01.2020

  • Вы можете показать нам свой Todo компонент? 03.01.2020
  • @technicallynick добрый день, я думаю, это не имеет ничего общего с компонентом Todo, но все же я покажу это screencast.com/t/qbDbM2UeAb7 03.01.2020
  • Меня смущает ваше заявление о том, что оно не имеет ничего общего с Todo. useParams предназначен для вызова из компонента, визуализируемого <Route />, так же, как и в вашем Todo компоненте. Вы хотите сказать, что если вы console.log(params.project, params.todo), ваша консоль ничего не вернет? Если это так, то я бы сказал, что следующим шагом будет кодовый ящик, который мы должны увидеть. Я не вижу ничего плохого в вашем Todo компоненте. 03.01.2020
  • useParams может работать только в вашем Todo компоненте или его поддереве, вы пробуете его из App.js и, следовательно, undefined 03.01.2020
  • @technicallynick, простите за путаницу, я только что поставил ‹Route›, который вас смущает, потому что в компоненте Todo useParams работает хорошо. 03.01.2020
  • @Agney, спасибо, есть ли другой способ получить объект param? 03.01.2020
  • @Agney, спасибо за ответ, вы можете опубликовать его как ответ, мы отметим его как правильный 13.03.2020

Ответы:


1

Я считаю, что Route вставляет реквизит в компоненты, которые он рендерит, поэтому вы сможете вытащить его прямо из match опоры в Todo: this.props.match.params.

У вас будет доступ к сопоставлению объектов в разных местах:

  • Компонент маршрута как this.props.match
  • Отрисовка маршрута как ({match}) => ()
  • Направить дочерние элементы как ({match}) => ()
  • withRouter как this.props.match
  • matchPath как возвращаемое значение

https://reacttraining.com/react-router/web/api/match

Это работает только для компонентов, отображаемых внутри маршрутизатора на маршруте, то есть компонента, который отображает Route, или дочернего компонента, расположенного ниже по DOM. дерево. Если App.js выполняет рендеринг маршрутизатора, у него его не будет.

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

<Route
  render={({ match }) => {
    console.log('match', match);
    // do what you need with the `match` prop, i.e. `match.params`
    return null; // return null to indicate nothing should actually be rendered
  }}
/>
03.01.2020
  • спасибо за ответ, я полагаю, вы имеете в виду, что нужно вставить его в Todo, верно? Извините, но это не имеет отношения к этому. Я стремлюсь к App.js. Я пробовал функцию (реквизит) {... но все еще не определено 03.01.2020
  • App.js отображается в пределах маршрута? Если нет, то для него нет информации о маршруте. 03.01.2020
  • Нет это корень 03.01.2020
  • @AljohnYamaro Извините за непонимание вашего исходного вопроса. Я обновил свой ответ, чтобы показать, как получить доступ к деталям маршрута в корневом компоненте. 03.01.2020
  • Отредактированный ответ @DrewReese - правильный. Однако, чтобы выделить точку немного точнее, убедитесь, что вы используете опору render в Route, а не опору component при использовании встроенной функции. Свойство component будет принудительно выполнять полное перемонтирование компонента при каждом рендеринге, а не обновлять его. Я упоминаю об этом только потому, что в вашем примере используется component, в то время как @DrewReese правильно использует render. Я не хотел, чтобы вы упустили из виду это небольшое, но существенное изменение. 03.01.2020
  • спасибо за редактирование, я ценю это, я пробовал его внутри App.js перед Switch, а также я пробовал его внутри index.js js, который возвращает null, и пытался также вернуть ‹App /›, к сожалению, все еще параметр undefined 04.01.2020
  • @AljohnYamaro Не могли бы вы обновить свой вопрос, указав, что вы пробовали и где все еще застряли? 11.01.2020
  • @DrewReese, извините за поздний ответ, теперь я понял, что useParams можно использовать только за исключением App.js, как сказала Агни 13.03.2020
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..