Question

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

ctx.drawImage(offCanvas, x, y);

向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的内容，这会导致错误，因为ajax请求期望json数据，而不是html，并且无论如何都是错误的。

，而

index.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'))并返回数据，一切正常。

作为旁注，我为webpack-hot-load前端设置了端口3000，为Express后端设置了端口3001。

在快速方面，我有以下路线设置：

http:localhost:3001/api/threads

访问localhost：3001 / api / threads返回预期的数据。 localhost：3001返回预期的router.get('/api/threads', function (req, res, next) { Thread.find(function (err, threads) { if (err) { return next(err); } res.json(threads) }) })。

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简单地呈现它的孩子。我不确定您要为根URL（localhost:3001）显示的确切内容，但您将使用上面的组件。

要使用 API端点，您只需通过它的完整路径（localhost:3001/api/threads）在组件directl 中调用它。

React-router混淆了请求网址

1 个答案: