Javascript 反应路由器弄乱了请求URL

我正在尝试使用react路由器实现以下嵌套URL。我的问题是，当嵌套在路由器组件中时，提要组件将GET和POST请求发送到错误的url，如下所示：

ReactDOM.render((
                <Router history = { browserHistory }>
                  <Route component={ NavBar }>
                    <Route path='/' component={ Feed } url='/api/threads' pollInterval={ 2000 } />
                    <Route path='signup' component={ Signup } />
                  </Route>
                </Router>
  ), document.getElementById('root'));

将请求发送到预期的url

http:localhost:3001/api/threads

，并返回数据，一切正常

作为补充说明，我为webpack热加载前端设置了端口3000，为Express后端设置了端口3001

在快车方面，我设置了以下路线：

  router.get('/api/threads', function (req, res, next) {
    Thread.find(function (err, threads) {
      if (err) { return next(err); }
      res.json(threads)
    })
  })

访问localhost:3001/api/threads返回预期的数据。

---

localhost:3001返回

无法获取所需的“/”

。

首先，如果URL打算用作API端点，而不是直接在浏览器中，则它可能根本不属于您的react路由器仅在路由器中放置您希望在浏览器中呈现视图的路径。因此，如果希望

localhost:3001/api/threads

通过api调用返回JSON，请将其从路由器中取出

此外，您应该使用

IndexRoute

组织您的路线。试试这个：

<Router history={browserHistory}>
  <Route path="/" component={CoreLayout}>
    <IndexRoute component={Feed} />

    <Route path="signup" component={Signup} />

    <Route path="*" component={NotFoundView} />
  </Route>
</Router>

其中

coreloayout

simple渲染它的子级。我不确定您正试图为根URL显示什么（

localhost:3001

），但您将使用上面的组件

---

要使用API端点，您只需在组件directl中通过它的完整路径（

localhost:3001/API/threads

）调用它即可。

我尝试了这个方法，但不幸的是错误仍然存在。我99%确定错误不在快速端。我花了大约2个小时调试这个，我很确定这就是问题所在。在实现这个路由器之后，当您访问

localhost:3001

时会发生什么？您是否试图使用

localhost:3001/api/threads

作为实际URL？请准确指定您希望使用的url。感谢您的回答，在组件中对url进行硬编码是可行的。但是，如何支持我们将其他道具传递到组件中？您所说的“将请求发送到预期的URL”是什么意思？@mtaube：在第一个示例代码中，react应用程序不断尝试获取导致错误的数据。在第二个示例中，react应用程序GET requests http:localhost:3001/api/threads，它连接到expression中的api端点。您是说您正在尝试使用

localhost:3001/api/threads

作为api端点吗？如果是这样，它根本不属于你的路由器。是的，我是。奇怪的是，在正常呈现组件时，将url作为道具传递是有效的，而不是在路由器内部。或者，您是说您想使用

localhost:3001/api/threads

作为api端点（返回JSON）和前端浏览器url（返回index.html）？

<Router history={browserHistory}>
  <Route path="/" component={CoreLayout}>
    <IndexRoute component={Feed} />

    <Route path="signup" component={Signup} />

    <Route path="*" component={NotFoundView} />
  </Route>
</Router>