React-router 弄乱了请求的 url

Question

我正在尝试使用 react-router 实现以下嵌套 url。我的问题是，当嵌套在路由器组件中时，Feed 组件将 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'));

向http://localhost:3000/?_=1463499798727 发送请求，返回index.html 的内容，这会导致错误，因为ajax 请求需要json 数据，而不是html，并且无论如何都是错误的。

同时

ReactDOM.render((
                <Router history = { browserHistory }>
                  <Route component={ NavBar }>

                    <Route path='signup' component={ Signup } />
                  </Route>
                </Router>
  ), document.getElementById('root'));

ReactDOM.render(<Feed url='/api/threads' pollInterval={ 2000 }/>, document.getElementById('feed'))

向期望的urlhttp:localhost:3001/api/threads发送请求并返回数据，一切正常。

附带说明一下，我为 webpack-hot-load 前端设置了 3000 端口，为 Express 后端设置了 3001 端口。

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

  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 返回 Cannot GET '/' 这是预期的。

Answer 1

首先，如果一个 URL 旨在用作 API 端点而不是直接在浏览器中，那么它可能根本不属于您的 react-router。 只在路由器中放置您希望在浏览器中呈现视图的路径。因此，如果您希望 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>

CoreLayout simple 在哪里渲染它的孩子。我不确定您要为根 URL (localhost:3001) 显示的确切内容，但您可以使用上述组件。

要使用您的 API 端点，您可以直接在组件中调用它y，通过它的完整路径 (localhost:3001/api/threads)。