＜withRouter(Connect(““)) /＞ outside a ＜Router＞ 和 You should not use ＜Switch＞ outside a ＜Router＞ 问题处理

1. 问题描述

这几天在处理前端的 redux,react,react-router,react-router-dom 时遇到一个特别坑问题, 先上代码
路由页面

const Pages = () => (
  <div>
    <BrowserRouter>
      <Switch>
        <Route path="/shopping" component={Shopping} />
        <Route path="/annonces" component={Announce} />
      </Switch>
    </BrowserRouter>
  </div>
);

export default Pages;

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Page />
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

在我加上标签时,就没有问题,但是我无法使用 redux 的dispatch(push(url))来跳转页面,而必须使用其他方式进行跳转,这在我没有使用component的场景下是没办法使用的,得使用window.location.href来实现,这让我很不爽,

在实验中,我发现在没有使用标签时就可以正常使用dispatch(push(url))来跳转页面,但是问题是去掉了时就报异常 outside a 或者 You should not use outside a ,google了好一段时间,答案都是加上,没办法,自己找问题

二. 解决方法

发现是由于react-router和react-router-dom版本不一致导致此异常,将其修改为一致即可解决

如下代码所示

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

codesandbox地址:https://codesandbox.io/s/react-router-y2fxz

坑年年有,今年特别多