реагировать роутер.получить все параметры пути с помощью `match.params` - PullRequest
Новая
       40

реагировать роутер.получить все параметры пути с помощью `match.params`

0 голосов
/ 19 декабря 2018

в моем приложении React у меня есть маршрут к другому компоненту, например

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

, теперь в компоненте Externals, я хочу получить значение :pId.

с использованием this.props.match.params просто дает мне последний параметр :folder, и я не могу получить значение :pId.Как мне это сделать?

1 Ответ

0 голосов
/ 19 декабря 2018

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);

Вот песочница с кодом, показывающая это:

URL-адрес для редактирования: https://codesandbox.io/s/nwlrm3n66p

URL-адрес для просмотра примера вывода: https://nwlrm3n66p.codesandbox.io/mypid/external/myfolder

...