reactjs – React does not recognize the computedMatch prop on a DOM element

I want to use global header but I have a problem. I want to use it like this:

const Main = () => (
  <>
    <Switch>
      <Route exact path="/login" component={FrontLogin} />
      <Route path="/register" component={FrontRegister} />
    </Switch>
    <Switch>
      <div id="test">
        <Header />
        <PrivateRoute exact path="/home" component={FrontHome} />
        <PrivateRoute path="/:username" component={FrontProfile} />
        <Redirect to="/home" />
      </div>
    </Switch>
  </>
);

index.js

render() {
  return (
    <Provider {...Store}>
      <BrowserRouter>
        <Route component={Main} />
      </BrowserRouter>
    </Provider>
  );
}

According to some sources, it is said that such a usage is not correct and when I use it like this I get an error like this: React does not recognize the computedMatch prop on a DOM element. So how can I solve this problem and how can I do this?

Read more here: Source link