Как Next.js маршруты отображаются в props.url?

#reactjs #next.js

Вопрос:

Как показано в README.md , я пытаюсь получить доступ this.props.url , но он не определен, и я не уверен, как компонент должен получать next-routes реквизиты. Я бы ожидал connect или withRouter и т.д., Но я никогда не видел props.url и не могу найти ни одного import упоминания в README.md .

Как я должен получить this.props.url ?

Ответ №1:

Я чувствую, что это опечатка в документах для next-routes . Этот пакет не поддерживался уже несколько месяцев и не обновлялся для следующей версии 7 или более поздней. Последняя поддержка была ^ 6.0.0.

В любом случае, в NextJS он должен быть прикреплен с помощью withRouter HOC, экспортированного из next/router . Как только вы прикрепите это, ваш запрос будет существовать this.props.router.query .

1. Самая большая проблема заключается в том, что у routes.js config конкретно есть name свойство, к которому я не могу получить доступ из моего компонента, что означает, что я должен вручную проверять файловую систему компонента /path и props.router.query параметры без причины

2. Я могу подтвердить, что использование обоих, next-routes вместе с withRouter , позволяет получить router prop.

Ответ №2:

Вы должны вернуть объект URL в getInitialProps, после чего вы сможете получить доступ к запросу в функции визуализации.

 export default class Blog extends React.Component {
  static async getInitialProps ({ query }) {
    return { url: { query } }
  }
  render () {
    // this.props.url.query.slug
  }
}

1. Если это так, то, возможно, один из наших компонентов-оболочек более высокого порядка, таких как next-redux-wrapper , переопределяет и удаляет его. В настоящее время getInitialProps вызывается с ({ Component, ctx, router })