Context Provider 内部的 React Router Switch 导致不断闪烁（重新渲染）

Question

我需要在我的反应路由器的所有路由中访问相同的状态。但是，当我将 SchedulerContext.Provider 放在 React Router Switch 组件周围时，我会不断地重新渲染（闪烁）一条路线。我想知道问题是否在于使用 Switch 周围或其他地方的上下文。

我注意到它只发生在第一条路线的组件 (Dash) 上。

class App extends React.Component {
  state = {
    scheduler: {
      ...defaultSchedulerContext,
      fetchScheduledPosts: () => {
        axios
          .post(`${defaultSchedulerContext.API_ENDPOINT}/list`)
          .then(res => {
            if (res.status === 200) {
              this.setState(state => ({
                scheduler: {
                  ...state.scheduler,
                  postsList: res.data
                }
              }))
            } else {
              this.setState(state => ({
                scheduler: {
                  ...state.scheduler,
                  errorMessage: res.status
                }
              }))
            }
          })
      }
    },
  }

  render() {
    return (
      <>
        <SchedulerContext.Provider value={this.state.scheduler}>
          <Switch>
            <Route exact path="/" component={withAuth(Dash)} />
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
          </Switch>
        </SchedulerContext.Provider>
      </>
    )
  }
}

Answer 1

通过使用 reach/router 而不是 react-router 使其工作。

Context Provider 内部的 React Router Switch 导致不断闪烁（重新渲染）

React Router Switch inside of Context Provider causes constant flickering (rerendering)

javascript

reactjs

react-router

react-context