当在react-big-calendar视图之间切换时，有没有办法让url改变？

Question

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

Answer 1

在受控状态场景中，您可以使用onNavigate控制date，使用onView控制view，您可以使用这些方法来控制路由，然后使用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并维护历史(以便您可以向前和向后)，您的路由器更新日历的实际状态值，您获得日历控件和浏览器历史记录。