在 react-big-calendar 视图之间切换时，有没有办法让 url 发生变化？答案

【问题标题】：Is there a way to make the url changing when switching between the react-big-calendar views?在 react-big-calendar 视图之间切换时，有没有办法让 url 发生变化？
【发布时间】：2021-04-13 12:17:34
【问题描述】：

我正在尝试使用 react-router-dom 实现 react-big-calendar 视图之间的切换。我知道日历有自己的路由，但是这个路由不会更改 URL，因此用户无法使用箭头或手势返回上一个视图，也无法使用链接打开具体视图。有没有办法实现它？

【问题讨论】：

标签： reactjs react-router-dom react-big-calendar

【解决方案1】：

在受控状态场景中，您可以使用onNavigate 控制date 和使用view 和onView，您可以使用这些方法来控制路由，然后根据您的 url 路由更改更新状态变量。

const onNavigate = (newDate, newView = viewFromState) => {
  // convert the date to some url string to use
  history.push(`${routeBase}/${convertedDate}/${newView}`);
};

const onView = (newView) => {
  history.push(`${routeBase}/${convertedDateFromState}/${newView}`)
};

  // at your component route, and this is seriously paraphrasing
  const params = useParams();
  // I'm using a reducer, since I often update multiple
  // bits of state simultaneously. I also, in the reducer,
  // remember to convert the 'date' to a true JS Date object
  // for RBC
  dispatch({type: 'PARAMS', params});

日历使用您的新 onNavigate 和 onView 方法来控制这些状态值，您的方法更新 url 并维护历史记录（因此您可以前进和后退），您的路由器更新日历的实际状态值，您就可以同时获得日历控件和浏览器历史记录。

【讨论】：