React throws Error and Uncaught Error when i use BrowserRouter, how to fix it?-CodePudding

I'm sorry for my inexperience, but I've lost my way. I use Browser Router and it gives me the error " "Error react-doma.production.min.js:216" and ""react-dot.production.min.js:260 Uncaught Error" I do not know how to fix it, because I do not even know the error. My code:

App.js

const BaseTemplate = () => (
    <div className="App">
        <BrowserRouter>
            <Routes>
                <Route path="/" exact component={Mainpage}/>
            </Routes>
        </BrowserRouter>
    </div>
);

function App() {
    return (
        <BaseTemplate/>
    );
}

export default App;

Mainpage.js
const localService = new Service();
class Mainpage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            category: '',
        };
    }
    componentDidMount() {
        document.title = 'Catalogs';
        localService.listCategories().then(r => alert(r.data)).catch(e => alert(e.response));
    }

    render() {
        return (
            <div>
                <p>hi?</p>
                {this.state}
            </div>
        );
    }
}

export default Mainpage;

Before that, I wrote on react about a year ago, and then a similar design worked

CodePudding user response：

I see you're using React Router v6. Route should be written as such:

<Route path="/" element={<Mainpage/>}/>

This should fix your issue. Else, please provide more code and your complete error.

CodePudding user response：

inyour index.js

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

it should look like this

and in your app.js

function App() {
  return (
    <div className="container">
      <Switch>
        <Route path="/" exact component={Mainpage}/>
      </Switch>
    </div>
  );
}

something like this. you set the Routes etc. at the higher components.