Реагируйте: Как получить переменную из URL?

Question

Я создаю приложение, которое должно загрузить «рабочее пространство» из базы данных на основе слага, предоставленного в URL. Моя структура URL - /app/<workspace slug>/<workspace view>. В настоящее время есть 3 вида для каждого рабочего пространства: Карта, Список и Настройки. Мне нужно получить значение <workspace slug> из URL, чтобы загрузить правильное рабочее пространство из базы данных. Также мне нужно вернуть сообщение об ошибке, если рабочая область не найдена.

Я довольно новичок в React, поэтому в настоящее время могу не следовать рекомендациям.

Моя маршрутизация

В настоящее время я выполняю маршрутизацию к каждому представлению рабочего пространства, просматривая каждое рабочее пространство и создавая маршрут для каждого из 3 представлений в App.js:

renderContent() {
    return (
        <Switch>
            <Route path="/" component={NetworkMap} exact />
              {this.state.workspaces.map(function(workspace, index){ // Map View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/map"} render={(props) => <Workspace {...props} workspace={workspace} component={Map} />} />
                );
              })}
              {this.state.workspaces.map(function(workspace, index){ // List View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/list"} render={(props) => <Workspace {...props} workspace={workspace} component={List} />} />
                );
              })}
              {this.state.workspaces.map(function(workspace, index){ // Settings View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/settings"} render={(props) => <Workspace {...props} workspace={workspace} component={WorkspaceSettings} />} />
                );
              })}
            <Route component={Error} />
        </Switch>
    );
}

Мои ссылки

{props.workspaces.map(function(workspace, index){
  return (<Link key={index} to={"/app/" + workspace.slug + "/map"} className="dropdown-item cursor-pointer">{workspace.name}</Link>);
})}

Мой индекс. js

<BrowserRouter>
    <App />
</BrowserRouter>

Я пытался изменить workspace.slug на :slug в пути маршрута, который Я думал, что это должно появиться в реквизитах, но я не могу заставить его работать должным образом:

{this.state.workspaces.map(function(workspace, index){
  return (
    <Route path={"/app/:slug/map"} render={(props) => <Workspace {...props} workspace={workspace} component={Map} />} />
  );
})}

Answer 1

match

Компонентам, отображаемым с помощью render prop, также будут переданы некоторые реквизиты маршрута, в частности, match - это тот, который вам нужен. Оттуда props.match.params.slug будет желаемым значением слага,

{this.state.workspaces.map(function(workspace, index){
  return (
    <Route
      path="/app/:slug/map"
      render={props => (
        <Workspace
          {...props}
          workspace={workspace}
          component={Map}
          slug={props.match.params.slug}
        />
      )}
    />
  );
})}

match также может быть доступен внутри компонента Workspace через спред в props. Если Workspace является функциональным компонентом, response-router-dom также имеет хук useParams.