history.push() 和使用 react-router 的自定义 URL 参数

IT技术 javascript reactjs react-router
2021-05-20 23:06:40

我正在尝试创建一个应用程序，用户可以在其中加入群组，我拥有的其中一个页面是群组仪表板。为此，我创建了一个 URL 参数为 id 的路由。

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

当用户创建一个组时，它会将它保存在我的数据库中，并获取 docID 用作 url 参数。

然后我history.push("/groups/".concat(docID))尝试将我的用户重定向到新页面。但是，这不起作用，而是将我带到.../groups/vs .../groups/docID。

我最初认为这是因为docID没有正确创建字符串，但是在将字符串记录到控制台后，它是正确的。

有人可以帮我弄这个吗？

1个回答

你没有使用Switch，我不知道为什么。以下是如何URL Parameters在 react-router 中正确使用：

路线：

<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去那条路线：

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

为了id在你的组件中获取，你可以使用useParamshook 或使用withRouterHOC（props.match.params?.id用于 HOC）：

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

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

  return <>Group Dash: {id}</>
}
其它你可能感兴趣的问题
上一篇使用 PLA 的 Prusa MK3S 的最小点/点缩进 下一篇如何使用 MenuItem 导航？材质-ui V1