Реактивный маршрутизатор, странное поведение, двойной путь

Question

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

Когда мы щелкаем по курсу, когда URL-адрес изменяется должным образом, когда мы щелкаем по любому другому (или тому же) курсу, добавляемый путь удваивается, поэтому при третьем щелчке он возвращается к обычному пути.

Пример: путь в адресной строке становится:

first click: /courses/course/1

second: /courses/course/:id/course/1

third: /courses/course/1

Откуда проблема? Заранее спасибо

Answer 1

Вы можете решить эту проблему, изменив push() в пределах Courses.js на путь относительно корня, соответствующий вашему определению Route. Обратите внимание на прямую вспышку / в начале и удаление ${path}:

this.props.history.push(`/courses/course/${course.id}`, {
  title: course.title
});

Вот рабочая разветвленная Песочница , включающая несколько разных подходов к этой проблеме.

Другой подход заключается в использовании Link или NavLink вместо <article> с onClick и с push() до history. Вы по-прежнему можете передавать государственное свойство title, как вы в настоящее время используете Link или NavLink. Это именно то, для чего Link и Navlink должны были использоваться:

{this.state.courses.map(course =>
  <Link
    key={course.id}
    to={{
      pathname: `/courses/course/${course.id}`,
      state: { title: course.title }
    }}
  >
    {course.title}
  </Link>
)

Это сделало бы элемент фактическим <a>, шаблон также открыл бы дверь для использования чего-то вроде NavLink , который мог бы выставить "активный" класс стилей для стилей при необходимости.

Вы можете также рассмотреть возможность упрощения Route и Link для соответствия более стандартным соглашениям:

<Route path="/courses/:id" exact component={Courses} />

// ...

<Link
  className="Course"
  key={course.id}
  to={{
    pathname: `/courses/${course.id}`,
    state: { title: course.title }
  }}
>
    {course.title}
</Link>

Надеюсь, это поможет!