反应路由器。使用 `match.params ` 获取所有路径参数答案

【问题标题】：react router. get all path parameters with `match.params `反应路由器。使用 `match.params ` 获取所有路径参数
【发布时间】：2018-12-19 16:02:55
【问题描述】：

在我的React 应用程序中，我有一个到另一个组件的路由，例如

<Route path={'/:pId/external/:folder'} exact={true} component={Externals} />

现在在Externals 组件中，我想获取:pId 的值。

使用this.props.match.params 只是给了我最后一个参数:folder，我无法获得:pId 的值。我该怎么做？

【问题讨论】：

标签： reactjs react-router routeparams

【解决方案1】：

props.match.params 包含所有参数。下面是一个示例，展示了如何处理它们：

import React from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter } from "react-router-dom";

const Externals = props => {
  return (
    <div>
      pId = {props.match.params.pId}
      <br />
      folder = {props.match.params.folder}
    </div>
  );
};
function App() {
  return (
    <BrowserRouter>
      <Route
        path={"/:pId/external/:folder"}
        exact={true}
        component={Externals}
      />
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

下面是一个代码沙箱：

要编辑的网址：https://codesandbox.io/s/nwlrm3n66p

查看示例输出的 URL：https://nwlrm3n66p.codesandbox.io/mypid/external/myfolder

【讨论】：

谢谢，但由于某种原因，我无法访问:pId。我已经用 Router <Provider><Router><React.Fragment><Route>.... 包裹了 Rout
请显示您尝试访问:pId的代码。
它写在问题中：this.props.match.params.*** 在 *** 我刚刚收到 folder 建议并输入 params.pId 结果错误
请在您的问题中显示您尝试的实际代码行以及导致的错误。更有用的是分叉我的代码沙箱并修改它以显示重现错误的最简单的代码版本。然后在您的问题中包含指向该沙盒的链接。