Как использовать параметр в URL-адресе с response-router-dom и строкой запроса и использовать его?

Question

У меня есть календарь и выбор. Когда я выбираю доктора, его планирование будет отображаться в моем календаре.

В моем App.js я использовал реакционный маршрутизатор, как вы видите:

import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from "react-router-dom";
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
  /*---------------------------------------------------- Rendu -----------------------------------------------------------------*/
  render() {
    return (
      <div>
        <BrowserRouter  basename="/ReactCalendar">
          <Switch>
            <Route exact path="/" component={Agenda} />
            <Route exact path="/affichageRDV" component={Planning} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}
export default App;

И в моем package.json у меня есть: "homepage": "https://prodTest/ReactCalendar", когда я его собираю, загружаю на свой сервер и запускаю на https://prodTest/ReactCalendar/

Но я хочу, чтобы в моем приложении загрузиласьidentifiant_user и пусть он в качестве параметра в URL-адресе выглядит так: * https://dev.alaxione.fr/ReactCalendar/?identifiant_user=2157887

Как отправить identifiant_user в мою повестку дня, потому что это параметр для извлечения планирования из бэкэнда и использования его в качествепараметр на URL?

Например, в моем Agenda.js я получил план, подобный следующему:

fetch(process.env.REACT_APP_API_BACKEND+'get_liste_planning/85flna?start='+moment().startOf('isoweek').toJSON()+'&end='+moment().endOf('isoweek').toJSON()+'&identifiant_user=2157887')
      .then(Response => Response.json())
      .then(data => {
        let evts = data.ListeResult;
        for (let i = 0; i < evts.length; i++) {
          evts[i].start = moment(evts[i].start).toDate();
          evts[i].end = moment(evts[i].end).toDate();
          this.state.evtBackend.push(evts[i])
        }                   
        this.setState({
          evtBackend: evts,
          events:  evts
        })

Как мне это исправить?

Answer 1

Вам нужно это,

<Route exact path="/:identifiant_user" component={Agenda} /> //`:identifiant_user` is the param

Поскольку identifiant_user кажется статичным, вы можете поддерживать его в состоянии,

Использование,

<Link to={`/identifiant_user=${this.state.identifiant_user}`}>