javascript - react 路由器参数化重定向

Question

我无法弄清楚如何参数化路由字符串以进行编程重定向。

我的设置在 /constants/routes.js

export defaults {
  user_details: '/user/:id/details',
}

我想推送:id以编程方式参数为

import routes from '../../constants/routes.js'
const UserListItem = ({name, id, history}) => (
  <li onClick={ () => history.push(routes.user_details, {id}) }>
  {name}
  </li>
)

互联网上似乎充斥着<Redirect to={/user/${id}/details} />这似乎不是最佳选择，因为我想重用我的固定路线

Answer 1

我猜这取决于你如何使用这些路由常量。我也不确定“绕过任何规则”是什么意思，但您也许可以将常量更改为函数。

export defaults {
  userDetails: (id = ":id") => `/user/${id}/details`,
}

用法:

path={routes.userDetails()} -> `/user/:id/details`

history.push(routes.userDetails("abc123")) -> `/user/abc123/details`