React роутер не понимает переменную пути?

Question

У меня есть приложение реагирования, работающее в корзине Amazon S3, оно доступно здесь: это домашняя страница приложения, пользователь может искать корабли в строке поиска.

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

Однако, когда пользователь нажимает на ссылку, вы не видите страницу сведений, но пользователь перенаправляется на эту страницу без CSS.

Локально все работает нормально.

Мой компонент маршрута выглядит так:

export class Routes extends React.Component {
render() {
    return (
        <div>
            <Route exact path={HOME_PAGE} component={Home}/>          
            <Route path={HOME_PAGE + "/details/:id"} component={Details}/>
            <Route path={HOME_PAGE + "/form/:mode"} component={Edit}/>
            <Route path={HOME_PAGE + "/form/:mode/:id"} component={Edit}/>
            <Route path={HOME_PAGE + "/csvForm"} component={CsvForm}/>
        </div>
    );
  }
}

Я создал префикс для пути HOME_PAGE, который выглядит следующим образом:

export const HOME_PAGE = (ENVIRONMENT == "DEVELOPMENT") ? "" : "/url"

Устанавливает путь к домашней странице для среды разработки или производства.

Я думал о другом способе передачи идентификатора корабля на страницу сведений, возможно, с параметром GET. Таким образом, маршрут будет выглядеть примерно так HOME_PAGE + /details?id=5c335682379b4d7a6ea454a8.

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

Answer 1

Если вы используете реагирующий маршрутизатор v4, для каждого определенного вами маршрута реагирующий маршрутизатор пропустит три подпорки:

• Match
• Расположение
• История

Если вы хотите получить доступ к params (который находится под /:someParams), вы можете получить доступ к Match реквизиту, используя match.params.someParams

И если вы предпочитаете строку запроса, вы можете использовать реквизиты Location, используя location.search, которая является строкой, так что в вашем случае она вернет ?id=5c335682379b4d7a6ea454a8. Вам нужно будет обработать строку, используя qs, чтобы получить значение id.

Подробности можно посмотреть здесь: https://reacttraining.com/react-router/core/api/Route/route-props

Так что в вашем случае это будет решение:

На твоих родителях

<Route path={HOME_PAGE + "/details"} component={Details}/>

Ваш ваш Details Компонент

import qs from 'query-string'

const Details = ({location}) => {
  const {search} = location
  const queries = qs.parse(search) // you should have the query string object
  return (
    <div>{queries.id}</div>
  )
}