Question

使用较新版本的React Router，如果使用browserHistory.push（）进行转换，如何将参数传递给转换到的路径？如果browserHistory不允许这样做，我愿意使用其他方式进行转换。我看到在React Router中我最顶级的子组件中有this.props.routeParams，但我似乎无法在转换时使用上一个路由中的值填充这个值。

Answer 1

现在你将做这样的事情

history.push({
  pathname: '/about',
  search: '?the=search',
  state: { some: 'state' }
})

以下是API documentation

的链接

Answer 2

对于React Router v4，我们可以这样操作：

const history = useHistory();
 history.push({
      pathname: "/create-opinion/"+user,
      state:{  username:userName}
    };

并简单地从其他组件中获取它：

const history = useHistory();

然后获取用户名：

const username = history.location.state.username;

别忘了从react-router-dom导入useHistory

如果您尚未安装react-router-dom 尚未输入：

$ npm install --save react-router-dom

Answer 3

如果你想传递一个路径参数，你可以按如下方式进行。我正在使用示例组件Merchant。

定义路线

<Route exact path="/merchant/:id" render={(props) => <Merchant id={props.match.params.id}/>} />

定义历史

const history = createBrowserHistory({
    basename:''
})

使用参数添加到历史记录

history.push(`/merchant/${id}`)

在React Router中，如何在使用浏览器历史记录推送时传递路由参数？

3 个答案: