Question

我有一个日历和一个选择，当我选择医生时，他的计划将出现在我的日历上。

正如我所见，我在App.js上使用了react-router：

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}`}>

如何在带有react-router-dom和查询字符串的url上使用参数并使用它？

1 个答案: