时间戳

首页 > 解决方案 > 在 react-big-calendar 视图之间切换时，有没有办法让 url 发生变化？

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

问题描述

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

标签： reactjsreact-router-domreact-big-calendar

解决方案

在受控状态场景中，您可以使用 和 with 进行控制date，onNavigate您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 并维护历史记录（以便您可以前进和后退），您的路由器更新日历的实际状态值，您可以获得日历控件和您的浏览器历史记录。

推荐阅读