Javascript 从react to节点获取url参数

我有一个运行在

localhost:5000

上的节点服务器，我可以通过以下代码在url中发送哈希：

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

然后我还有一个运行在

http://localhost:3000

，以及package.json中的代理设置，但当I vistor

http://localhost:3000/somehash

我无法检索值

某些哈希值

。我是否遗漏了一个步骤，以便能够从react获取该值并将其传递给节点

谢谢

背景：

---

我正在创建一个url缩短器。用户访问react应用程序并输入要缩短的url。节点返回用户可以使用并与其他人共享的哈希值。获得散列url的用户可以访问并重定向到原始url。在localhost:5000（节点）上工作正常，但在localhost:3000（react）上不工作。由于某些原因，当用户第一次访问页面时，节点没有从react中提取哈希。

您的后端正在侦听端口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));
});

---

您的后端正在侦听端口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));
});

---

您必须配置一个路由以在react上接收哈希。 然后，react代码可以获取后端并从哈希中获取URL。 只有这样，react才能使用

window.location=URL

如果您使用的是

react router dom

，您可以创建如下路由：

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

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

---

您必须配置一个路由以在react上接收哈希。 然后，react代码可以获取后端并从哈希中获取URL。 只有这样，react才能使用

window.location=URL

如果您使用的是

react router dom

，您可以创建如下路由：

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

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

---

你想干什么？前端在端口3000上。要从后端获取结果，您必须使用后端端口，即5000。感谢您的回复。我正在创建一个url缩短器，因此当用户在前端提交url时，它会传递到后端，并向前端返回一个哈希。然后，用户可以共享此哈希，当用户访问它时，它将重定向到原始url。有点像goo.gl或bitly。我正在努力解决的问题是，当用户使用散列访问短url时。我无法让节点从react应用程序中标识url中的哈希。希望这是有道理的你想做什么？前端在端口3000上。要从后端获取结果，您必须使用后端端口，即5000。感谢您的回复。我正在创建一个url缩短器，因此当用户在前端提交url时，它会传递到后端，并向前端返回一个哈希。然后，用户可以共享此哈希，当用户访问它时，它将重定向到原始url。有点像goo.gl或bitly。我正在努力解决的问题是，当用户使用散列访问短url时。我无法让节点从react应用程序中标识url中的哈希。希望这能让senseI添加一些代码来说明如何将URL参数传递给组件。我希望这对您有所帮助。我添加了一些代码来说明如何将URL参数传递给组件。我希望这对你有帮助。