I encountered this error while using react-router-dom.

error image

An error occurs when using the react router dom, and it operates normally when not using it.

Here is my code

import React from 'react';
import { HashRouter, Route } from 'react-router-dom'; 
import './App.css';
// import Home from './routes/Home'
//import About from './routes/About'

function App(){
    return (
        <HashRouter>
            <Route />
        </HashRouter>
    )
}

export default App;

When importing HashRouter and Route, there is no error, but when using as follows, there is an error at the top.

please help me I've been spending three hours here

CodePudding user response：

I think you want to use Routes, rather than HashRouter

import React from 'react';
import { Routes, Route } from 'react-router-dom'; 
import './App.css';
// import Home from './routes/Home'
//import About from './routes/About'

function App(){
    return (
        <Routes>
            <Route />
        </Routes>
    )
}

export default App;

CodePudding user response：

I'm asking you why you using hashRouter , are you sure about using it , though it's not recommended , check: https://reactrouter.com/docs/en/v6/routers/hash-router

You can use browser router replacing hashrouter

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    {/* The rest of your app goes here */}
  </BrowserRouter>,
  root
);