使用 react-router-dom 添加多个参数并出现连接问题答案

【问题标题】：Adding multiple params with react-router-dom and issue with concatenation使用 react-router-dom 添加多个参数并出现连接问题
【发布时间】：2020-11-28 05:50:13
【问题描述】：

首先，我尝试使用以下代码解决此问题：Multiple params with React Router。但是有定义。在这种情况下我没有得到的东西。我对react-router-dom 还很陌生，我试图在 URL 中添加两个参数，如下所示：/:type/:projectid。

我已经像这样从一组数据中实例化了我的<Link>：

let projectRoutePlaceholder = `${ele.type}/project${this.props.index}`

  return(
        <Router>
          <Link to={projectRoutePlaceholder}>
            ....
          </Link>
        </Router>
      );

当我将鼠标悬停在我的内容上时，我的路由 URL 会显示在浏览器的左下方。在我的index.js 文件中，我设置了这样的路线：

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Route exact path='/' component={App} />
      <Route exact path='/index' component={ProjectIndex} />
      <Route exact path='/info' component={Info} />
      <Route exact path='/:type/:id' component={ProjectTemplate} />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')

现在，有两个问题我无法解决。

当我单击<Link> 元素时，它不会将我发送到ProjectTemplate 组件，而是停留在<Link> 元素上。当我强制（使用确切的路线刷新页面，例如：commercial/project0）时，它可以工作。
当我再次单击 <Link> 元素时，params 被连接起来（例如：commercial/commercial/project0）

如何解决这两个问题？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

使用react-router-dom，您只希望拥有一个环绕您的路线的顶级Router。您的 Links 也必须出现在该 1 路由器的子树中的某个位置。外部路由器保存您当前路由的上下文并导致状态更新，这是您的不同路由生效的方式。因为您使用它自己的路由器包装每一个链接，所以当您单击其中一个链接时，包装它们的路由器是唯一得到更新的路由器，它没有任何要更新/显示的子路由。如果你从你的链接中去掉这些包装路由器，只在你的路由周围保留顶级路由器，这应该可以解决你遇到的问题。
将let projectRoutePlaceholder = `${ele.type}/project${this.props.index} 更改为let projectRoutePlaceholder = `/${ele.type}/project${this.props.index}，使其开头有一个斜杠。如果您没有放置前导斜杠，那么 react-router-dom 将假定您要将 url 附加到当前路由的末尾，这将导致您遇到的串联问题。通过添加前导斜杠，您是在告诉 react-router-dom 直接转到路由而不是附加它。

【讨论】：