在 Meteor 中使用 React-Router 传递参数答案

【问题标题】：Passing parameter with React-Router in Meteor在 Meteor 中使用 React-Router 传递参数
【发布时间】：2017-05-04 09:48:38
【问题描述】：

我正在学习 MeteorJS、React 和 React-Router，我在通过路由器传递 URL 中的参数时遇到了困难。我已经搜索了答案，但我找不到我做错了什么：

在我的 Routes.jsx 文件中（'lists' 是我的 MongoDB 集合）：

   render: function() {
    return (
      <Router history={browserHistory}>
        <Route path='/' component={Navbar}>
            <Route path='/home' component={Home} />
            <Route path='/register' component={Register} />
            <Route path='/login' component={Login} />
            <Route path='/listpages/:listId' component={ListPages} />
          </Route>
      </Router>
    );
  }

在我的 MyLists.jsx 文件中（在组件内部）：

  renderLists() {
      return this.data.lists.map((myList) => {
        return
           <li key={myList._id}>
           <Link to='listpages' params={{ listId: myList._id}}>
              {myList.name}
           </Link>
               </li>;
      });
  },

  render() {
    return (
      <div>
        <h2>Lists</h2>
        <AddList />
        <ul>
          {this.renderLists()}
        </ul>
      </div>
    );
  }

当我单击 ListPages 的链接之一时，我收到控制台错误：

Warning: Location "listpages" did not match any routes

此外，订单项中嵌入了正确的 listId，而不是 URL：

<li>
  <Link to="listpages" params={listId: "qksabGvfeuf5PdaJv"} onlyActiveOnIndex=false...>
    <a params={listId: "qksabGvfeuf5PdaJv" className="" style={}...>Inbox</a>
  </Link>
</li>

但是如果我把这个参数去掉：

<Route path='/listpages' component={ListPages} />

然后它按预期工作并显示 ListPages 的内容（现在它只是一个标题，看看我是否到达那里）。所以 ListPages 确实存在，但在我传递参数时不存在。我做错了什么？

提前感谢您提供的任何帮助！

【问题讨论】：

标签： mongodb meteor reactjs react-router

【解决方案1】：

对于可能偶然发现此页面并进行 Google 搜索的任何人：

这个问题可能在当前版本的 React Router 之前就已经被问过了，但是与 path='/route/:id' 建立链接的正确方法是在 <Link to={'/route/' + id} 上做，其中 id 是你想要显示的东西。由于您缺少关键 id 部分，因此您会收到错误消息。

例如，我想显示一个具有特定 ID 的表格，我将其作为道具。

Routes.jsx：

...
<Route path='/DisplayTable/:tableId' component={ Comp } />
...

组件我要显示来自 (SelectTable.jsx) 的表格：

...
<Link to={'/DisplayTable/' + this.props.tables[i]._id} />
...

【讨论】：

【解决方案2】：

你可以像这样传递你的查询参数，

<Link to={{ pathname: 'listpages', query: { listId: myList._id } }}>

【讨论】：

【解决方案3】：

感谢您的意见。我进行了更改，第一次加载时，我单击了链接并收到了相同的错误（警告：位置“列表页面”与任何路线都不匹配）。当我刷新再次尝试时，现在应用程序在启动时崩溃，并在您建议的行上出现 unexpected token error。

【讨论】：

作为一个更新，我已经放弃了 React-Router，我决定试试 Flow Router...