Question

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

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

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

使用this.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

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

1 个答案: