Question

我正在学习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嵌入在订单项中，但不包含在网址中：

<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确实存在，但是当我传递参数时却没有。我做错了什么？

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

Answer 1

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

在当前版本的React路由器之前可能已经提出过这个问题，但是与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} />
...

Answer 2

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

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

Answer 3

感谢您的输入。我进行了更改，第一次加载时，我点击了链接并收到了同样的错误（警告：位置“listpages”与任何路径都不匹配）。当我刷新再次尝试时，现在应用程序在启动时崩溃，并在您建议的行上出现意外令牌错误。

使用Meteor中的React-Router传递参数

3 个答案: