react create-react-app configuration routing error (Uncaught TypeError: Cannot read properties of null (reading 'useRef'))

Error message:

Uncaught TypeError: Cannot read properties of null (reading ‘useRef’)

The above error occurred in the component:
at BrowserRouter (http://localhost:3000/static/js/bundle.js:4864:5)
at App Consider adding an error boundary to your tree to customize error handling behavior.

solution:

My environment is:

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.16.0",
    "react-router-dom": "^6.16.0",

create-react-app v5

When I encountered this problem, I initially suspected a syntax problem, but in the end it was ruled out.
My solution is:
1. First try to clear the cache and execute npm cache clean --force
2. npm start and see if it works
3. If not, delete node_moudels and then cnpm install (I tried it several times and it worked)
4. Finally, just npm start

I think the reason may be caused by the .store under node_modules. If I delete .cache alone, it doesn't work. Then I delete .store and an error will be reported directly. Finally delete the entire node_modules.
My code is as follows:
1. First npm react-router-dom
2. Write the following code in App.js:

import React from "react";
import {
    
     BrowserRouter, Routes, Route } from "react-router-dom";
import routes from './routes';
const App = () => {
    
    
  console.log(routes)
  return (
    <BrowserRouter>
      <Routes>
        {
    
    routes.map((route) => (
          <Route key={
    
    route.path} path={
    
    route.path} element={
    
    route.component} />
        ))}
        {
    
    /* <Route path="*" element={<Home />} />  */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

3.Write in index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
   </React.StrictMode> 
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4. Create a new routes.js file under src and write:

// 导入你的页面组件  
import Home from './pages'; 
const routes = [
  {
    
     path: "/", component: <Home/>}
];

export default routes;

If you run and see the things in the Home component, it means success. After that, you can import other components in scr/router.js and just write the path and routers.

Note: react-router-dom v6 and v5 api are not the same. For example, in v5, Route is component and v6 is element. For specific writing methods, it is recommended to refer to the version documentation you are using!