4

我试图找到我在使用 react-router 时遇到的一个棘手的错误。出于某种原因，在顶级页面路由中设置我的一个子组件的状态会导致以下错误：

Uncaught Error: Invariant Violation: Missing "userId" parameter for path "/user/:userId"

无论我是否导航到该路径，都会发生此错误。我的路线如下所示：

var routes = (
  <Routes>
    <DefaultRoute handler={LoginPage} />
    <Route name="login" handler={LoginPage} />
    <Route name="home" handler={HomePage} />
    <Route name="category" path="/category/:category" handler={CategoriesPage}/>
    <Route name="profile" path="/user/:userId" handler={ProfilePage}/>
  </Routes>
);

我的 ajax 调用如下所示：

var Feed = React.createClass({
  getInitialState: function() {
    return { feedItems: [] };
  },

  componentDidMount: function() {
    $.ajax({
    url: '/api/transactions',
    dataType: 'json',
    success: function(transactions) {
      this.setState({ feedItems: transactions });
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
  });
},

....

这个 Feed 是在一堆页面上生成的，包括 HomePage 和 ProfilePage。我在弄清楚 :userId 参数如何与提要中的 Ajax 调用相关时遇到了很多麻烦，但这就是堆栈跟踪引导我的地方。任何有关这里发生的事情的帮助将不胜感激。

更新：发现问题。我的 mongo 数据库已过时（模型模式已更改），这导致了许多问题，最终导致了这种不变违规。我仍然不完全确定这两者是如何相关的，但删除旧对象解决了这个问题。

4

2 回答 2

12

谢谢，@ritmatter 自己解决了这个问题！只是作为参考，这里是带有文档链接的答案。

请记住，在代码中的所有react-router <Link>元素中，要包含params指向参数化路由的链接对象：

<Link to="BillingInfo" params={userId:"user876718236"}>Your Billing Information</Link>
<!-- linking to /user876718236/billing-info -->

在这里查看详细信息：react-router/Link

更新[2015-03-29] 更正了 JSX 参数大括号。感谢@Akay。

于 2014-12-21T20:34:03.247 回答
1

更新：v1.0（2015 年 11 月）

不再支持命名路径，您可以链接到完整路径。ES6 中的字符串模板对此非常方便：

// v0.13.x
<Link to="user" params={{userId: user.id}}>Mateusz</Link>

// v1.0
<Link to={`/users/${user.id}`}>Mateusz</Link>

来自变更日志：链接。

于 2015-11-11T16:53:09.180 回答