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

Question

在我的React应用程序中，我有一条通往另一个组件的路线，例如

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

现在在Externals组件中，我想获得:pId价值。

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

Answer 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