React-router-dom routing configuration

problem description

how to configure the route for the React project and keep reporting to: TypeError: Cannot read property "location" of undefined,?

the environmental background of the problems and what methods you have tried

found the document, all in the form of < Route path= "/ about" component= {About} / >, but I wrote it under
Baidu in a router folder. I only saw that one person was talking about the problem of the react-router version, saying that it would be fine to change the configuration in the package.json: "react-router": "^ 3.0.0" to 3.x. But I used the version of "react-router-dom": "^ 4.3.1"
and then Baidu looked for the react routing configuration file. I thought the writing of the gods was a little complicated, so I wanted to write a simple one first.

related codes

router/index.js
const routes = [{
    path: "/invite",
    component: () => import("../views/Invite/Invite")
}]

const router = (props) => (
    <Router forceRefresh={!supportsHistory}>
        <Switch>
          <Route exact path="/" render={() => <Redirect to="/invite"/>} />
          {routes.map(({ path, component }, index) => (
            <Route
              key={index}
              exact
              path={path}
              component={component}
            />
          ))}
        </Switch>
    </Router>
  )
  
  export default router

what result do you expect? What is the error message actually seen?

error message:

not long after learning React, it is the first time to do React routing. Please help me to see what"s wrong. Thank you.

React.js

Apr.11,2021

import ... const routes=[...] const RouteApp = () => <Provider> <BrowserRouter> <Switch> <Route path="/" .../> {routes.map(({ path, component }, index) => ( <Route key={index} exact path={path} component={component} /> ))} </Switch> </BrowserRouter> </Provider>; export default RouteApp

import React,{Component} from 'react'; import { Route,Switch, HashRouter } from 'react-router-dom'; import Home from '../page/Home/home'; import User from '../page/User/user'; import NotFound from '../component/NotFound/NotFound'; class RouterMap extends Component { constructor(props, context){ super(props, context); } render(){ return ( <HashRouter> <Switch> <Route path='/Home' component={Home}/> <Route path='/User' component={User}/> <Route path='*' component={NotFound}/> </Switch> </HashRouter> ) } } export default RouterMap

import React from 'react'; import ReactDOM from 'react-dom'; import '../src/media/css/index.css'; import registerServiceWorker from './registerServiceWorker'; import RouterMap from './router/RouterMap'; import { Provider } from 'react-redux'; ReactDOM.render(<RouterMap />, document.getElementById('root')); registerServiceWorker();