Question

我有一个运行在localhost:5000上的节点服务器，并且能够使用以下代码在URL中发送散列：

app.get('/:hash', function(req, res) {
  const id = req.params.hash;
});

然后，我还有一个在http://localhost:3000上运行的前端react应用程序，以及在package.json中的代理设置，但是当我访问http://localhost:3000/somehash时，我无法检索到值{{1 }}。我缺少能够从React获得该值并将其传递给Node的步骤吗？

谢谢！

背景：我正在创建一个网址缩短器。用户访问react应用并输入要缩短的网址。 Node返回用户可以使用并与他人共享的哈希。被赋予哈希URL的用户可以访问并重定向到原始URL。在localhost：5000（节点）上工作正常，但在localhost：3000（反应）上不工作。出于某种原因，当用户第一次访问该页面时，节点未从响应中获取哈希值。

Answer 1

您的后端正在侦听端口5000而不是3000。

导航到localhost:3000/somehash时，您要让前端加载页面somehash，该页面需要与 React 中的路由相对应。

如果要通过端口3000上的React应用访问端口5000上的服务器API，则需要编写相应的功能。例如，对本地主机的HTTP请求。可能看起来像这样

// SomewhereInYourReactApp.js

const someHash = 'hello_world';

fetch(`localhost:3000/${someHash}`)
  .then(response => response.json())
  .then(myJson => {
    console.log(JSON.stringify(myJson));
});

Answer 2

您还必须配置一个路由以在响应时也接收哈希。然后，反应代码可以获取后端并从哈希中获取URL。只有这样，react才能使用window.location = URL

执行重定向

如果您使用的是react-router-dom，则可以这样创建路线：

<Route path="/app/:hash" exact component={YourComponent} />

然后，在YourComponent中，您可以像这样获得哈希值：

const {hash} = this.props.match.params;

从响应获取URL参数到节点

2 个答案: