如何使用react-router通过`Link`传递编码值?

时间:2017-11-14 10:49:35

标签: reactjs hyperlink react-router

对不起打扰,伙计们。我是反应和反应路由器的新手,我已经挣扎了好几天了。

实际上我试图在跳转到新页面之前传递一些值(使用链接属性target="_blank")并且在新页面中,我想使用这些值与服务器进行通信以及何时来自服务器来了,新页面将加载其内容。

路线路径是这样的

<Route path="/root/the_page" component={the_component} />

,链接将是这样的:

<Link to="/root/the_page" target="_blank" />

我检查的是discussion关于使用函数传递值,但我实际上无法重新生成它。对于query-params,我无法检索query中的this.props.location,即使我按以下方式设置链接:

<Link to={{pathname:"/root/the_page", query: {the_key: the_value}}} target="_blank" />

任何建议都会有所帮助。

提前谢谢!

2 个答案:

答案 0 :(得分:0)

我认为您没有理由要使用React-Router导航到外部页面。 React-Router用于在单页面应用程序中导航,但打开与target="_blank"的链接意味着离开该单页应用程序并打开新窗口/标签。

因此,为什么不使用常规锚标签呢?这对外部导航来说非常可行。

<a href="/root/the_page?the_key=the_value" target="_blank">Click me</a>

显然,您的历史记录对象不会因为您正在打开一个新的窗口/标签而被结转 - 因此您将无法“退回”或执行任何操作。

答案 1 :(得分:0)

检查此codepen(单击users子菜单项)。新窗口打开了参数。

<Link to={{pathname: "/users", query: { someParam: 'someValue' }}} target="_blank">Users</Link>

https://codepen.io/Kotuhan/pen/JOJzNY

然后,你可以从window.location.search字符串获取你的参数。