react-router参数化重定向

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`