history.pu sh () и параметры настраиваемого URL с использованием response-router

Question

Я пытаюсь создать приложение, в котором пользователи могут присоединяться к группам, и одна из моих страниц - это панель инструментов группы. Для этого я создал маршрут с параметром URL-адреса id.

<Router>
    <div>
        <LoggedRoute exact path = "/" component = {Home}/>
        <Route exact path = "/login" component = {Login}/>
        <Route exact path = "/groups/:id" component = {GroupDash}/>
    </div>
</Router>

Когда пользователь создает группу, он сохраняет ее в моей базе данных и получает идентификатор документа для использования в качестве параметра url.

Затем я использую history.push("/groups/".concat(docID)), чтобы попытаться повторно -направить моего пользователя на новую страницу. Однако это не работает и вместо этого меняет .../groups/ против .../groups/docID.

Сначала я подумал, что это потому, что строка docID не была создана должным образом, но после записи строки в консоль она верна.

Может ли кто-нибудь помочь мне с это?

Answer 1

Вы не использовали Switch, я не знаю почему. Вот как правильно использовать URL Parameters в реактивном маршрутизаторе:

Маршруты:

<Router>
  <Switch> {/* Use Switch */}
    <LoggedRoute exact path = "/" component = {Home}/>
    <Route exact path = "/login" component = {Login}/>
    <Route exact path = "/groups" component = {Groups}/> {/* This should be exact */}
    <Route exact path = "/groups/:id" component = {GroupDash}/> {/* This exact can be optional for this use case */}
  </Switch>
</Router>

И вы можете сделать history.push to go на этот маршрут:

<button
  onClick={() => {
    history.push(`/groups`)
  }}
>
  Groups
</button>
<button
  onClick={() => {
    history.push(`/groups/${1234}`)
  }}
>
  Groups dashboard
</button>

И чтобы получить id в вашем компоненте, вы можете использовать useParams hook или использовать withRouter HO C (используйте props.match.params?.id для HO C):

import React from 'react'
import { useParams } from 'react-router-dom'

export default function GroupDash() {
  let { id } = useParams()

  return <>Group Dash: {id}</>
}