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

纳库尔·阿帕迪亚(Nakul upadhya)

我正在尝试创建一个用户可以加入群组的应用,而我拥有的页面之一是群组仪表板。为此,我创建了一个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未正确创建字符串,但是在将字符串记录到控制台后,它是正确的。

有人可以帮我弄这个吗?

阿吉特·莎(Ajeet Shah)

您没有使用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组件中in,可以使用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}</>
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用react-router-dom的history.push

如何使用React的Router v4 history.push()

React router history.push 回退到 404 路由

react-router重定向vs history.push

react-router,属性“ history”未定义

如何使用Jest通过调用history.push来测试React-Router导航?

使用react-router v4的this.props.history.push打开窗口?

不确定如何使用react-router v4实现history.push

如何使用Jest模拟新的React Router Hooks的history.push

在 react-router 中使用 history.push() 传递道具时出现问题

在React Router中使用history.push()时需要刷新的问题

使用自定义ngDoBootstrap和createCustomElement时,Angular Router会忽略URL

React Router v5.2-使用createBrowserHistory和history.block阻止路由更改

React-Router v4。如何将参数附加到URL?TypeError:history.push不是函数

在React Router中,如何删除/更改我之前发送的history.push中的参数?

Redux和React Router:梳理调度和导航(history.push)

react-router-redux和redux-immutable:您不能更改<Router history>;它将被忽略

React Router的useHistory。History.push更改url但不加载组件

React Router history.push() 更改了 url 但未呈現組件內容

react-router-dom-链接和history.push之间的区别?

使用react-native-router-flux自定义navBar

如果使用 history.push 访问特定路由,React-Router v5 不会重定向

使用React Router和Router

如果react-router4中的位置不变,如何防止history.push?

History.Push链接到带有React Router的新选项卡

无法读取未定义的属性“ history”(React Router 5的useHistory挂钩)

反应Auth状态和Routes。无法在React-Router的'History'上执行'replaceState'

如何使用带有jQuery和自定义url参数的cookie

react-router:类型中缺少'history'

TOP 榜单

热门标签

归档