【问题标题】：Uncaught Error: Invariant failed: You should not use <withRouter(time_entry_edit_component_TimeEntryEditComponent) /> outside a <Router>未捕获的错误：不变式失败：您不应在 <Router> 之外使用 <withRouter(time_entry_edit_component_TimeEntryEditComponent) />
【发布时间】：2020-06-21 04:32:12
【问题描述】：

我正在使用 React 和 Typescript 编写 chrome 扩展。我决定使用 MemoryRouter。我得到一个像Uncaught Error: Invariant failed: You should not use <withRouter(time_entry_edit_component_TimeEntryEditComponent) /> outside a <Router>.这样的错误这是我的路由代码：

    import {MemoryRouter as Router, Route, Switch} from 'react-router-dom';
    import { TimeEntryEditComponent } from './components/time-entry-edit.component';
     <Router>
            <Switch>
              <StoreContext.Provider value={store}>
                <Route exact path="/" component={HomePageComponent} />
                <Route path="/time-entry/:id" component={TimeEntryEditComponent} />
                <Route path="/issue-edit/:id" component={IssueEditComponent} />
              </StoreContext.Provider>
            </Switch>
          </Router>

这是我连接 TimeEnrtyEditComponent 的方式：

const wrappedComponent = withRouter<TimeEntryEditProps, any>(TimeEntryEditComponent);
export { wrappedComponent as TimeEntryEditComponent  };

谢谢转发！

【问题讨论】：

标签： reactjs typescript react-router-dom

【解决方案1】：

你不需要withRouter

作为路由器的直接子级，您已经拥有所有的路由器方法。

只需跳过 withRouter 并检查组件的 props，您应该会看到所需的一切。

【讨论】：

查过了，其实我没有和路由有关的东西

【解决方案2】：

好吧，我的问题是，在我的上一个功能中：

ReactDOM.unmountComponentAtNode(document.getElementById("mount"));
    ReactDOM.render(
      <TimeEntryEditComponent
        changeMode={this.changeMode.bind(this)}
        timeEntry={this.state.timeEntry}
      />,
      document.getElementById("mount")

这就是为什么我用新组件替换了我所有的 dom，导致错误的原因

【讨论】：

请问哪个用例需要手动挂载和卸载组件？
好吧，我正在写 chrome 扩展，它没有自己的历史，如果你在没有全局存储和 react-router 的情况下绞尽脑汁，你必须这样做