如何从状态组件访问 ui-router 中的参数（非 url 和 url）？答案

【问题标题】：How do I access parameters (non-url and url) in ui-router from the state component?如何从状态组件访问 ui-router 中的参数（非 url 和 url）？
【发布时间】：2019-09-11 06:48:59
【问题描述】：

我试图弄清楚如何使用 ui-router 和 React，并且在从状态组件访问状态参数时遇到了问题。 ui-router 有大量关于如何创建状态、路由、参数等的文档，但我几乎没有找到关于如何实际访问它们的文档。路由和转换正在工作，但需要知道如何使用我传递的参数才能继续。谢谢你的帮助！

路由器设置和使用参数声明 homeState 的位置

const router = new UIRouterReact()
router.plugin(servicesPlugin)
router.plugin(pushStateLocationPlugin)

var loginState = {
    name: 'login',
    url: '/login',
    component: LoginPage
}

var homeState = {
    name: 'home',
    url: '/home',
    component: HomePage,
    params: { 
        id: {
            type: "int",
            array: false
        }
    }
}

var registerState = {
    name: 'register',
    url: '/register',
    component: () => <h2>Register me!</h2>
}

var loginHelpState = {
    name: 'loginHelp',
    url: '/login-help',
    component: () => <h2>Reset my password!</h2>
}

const states = [loginState, homeState, registerState, loginHelpState]

states.forEach(state => router.stateRegistry.register(state))

在我的登录状态中，我在成功登录时调用以下行。最终将传递更多用户详细信息，但现在只是使用发送用户 id（存储在 resp.id 中）进行测试。路由工作，应用程序转换到“home”组件，但无法弄清楚如何从那里访问 id。

router.stateService.go('home', {id: resp.id})

我的家庭状态组件

import React from 'react'
import './homePage.css'

function HomePage() {
  return (
    <div className="homepage">
      <div className="header">Header</div>
      <div className="asset-summary">Asset Summary</div>
      <div className="family-summary">Family Summary</div>
      <div className="backlog-summary">Backlog Summary</div>
    </div>
  ) 
}

【问题讨论】：

标签： reactjs

【解决方案1】：

看来我已经解决了这个问题。发布我的解决方案以防其他人遇到此问题。

我更改了路由状态声明，添加了一个resolve--->

var homeState = {
    name: 'home',
    url: '/home',
    component: HomePage,
    params: {
        id: {
            type: "int",
            array: false
        }
    },
    resolve: [
        {
            token: 'id',
            deps: ['$transition$'],
            resolveFn: (trans) => {
                const id = trans.params().id
                return id
            }
        }
    ]
}

然后我可以通过功能组件中的道具访问参数

function HomePage(props) {
    const id = props.id

    return (
        <div className="homepage">
            <div className="header">Header ID:{id}</div>
            <div className="asset-summary">Asset Summary</div>
            <div className="family-summary">Family Summary</div>
            <div className="backlog-summary">Backlog Summary</div>
        </div>
    )
}

最后很简单，但让我对令人困惑的文档布局以及他们倾向于跳转到 Angular 指令而不是 React 的倾向感到震惊。希望这对某人有所帮助。

【讨论】：