React-Router (experimental v6) 渲染问题？

Question

I recently installed react-router and react-router-dom experimental versions for a simple SPA I am making. Post-install, the dev server compiled and started just fine:

Compiled successfully!

You can now view rcg in the browser.

However, in the browser on localhost, I get the following:

TypeError: Object(react__WEBPACK_IMPORTED_MODULE_3__["unstable_useTransition"]) is not a function. (In 'Object(react__WEBPACK_IMPORTED_MODULE_3__["unstable_useTransition"])({
timeoutMs: b })', 'Object(react__WEBPACK_IMPORTED_MODULE_3__["unstable_useTransition"])' is an instance of Object)

BrowserRouter
/Users/user/.tsc-output/react-router-dom/index.js:48
  45 | export function BrowserRouter({ children, timeoutMs = 5000, window }) {
  46 |     let historyRef = React.useRef();
  47 |     if (historyRef.current == null) {
> 48 |         historyRef.current = createBrowserHistory({ window });
  49 |     }
  50 |     // @ts-ignore
  51 |     let [startTransition, isPending] = React.unstable_useTransition({

./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,

There's a few other blocks, but I am wondering if the problem lies in the above two. Anyone have insight into what the issue might be? Would it be caused by my somewhat spur-of-the-moment switch to experimental react-router and react-router-dom?

Also: package.json{

"name": "rcg",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "0.0.0-experimental-b1ff171f",
    "react-router-dom": "0.0.0-experimental-b1ff171f",
    "react-scripts": "3.4.1",
    "tsutils": "^3.17.1",
    "typescript": "^3.9.3"

App.js

import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css"
import { BrowserRouter, Route} from "react-router-dom";

import Navbar from "./components/navbar.component"
import BackendRoutes from "./components/backend-routes.component"

function App() {
  return (
    <BrowserRouter>
        <Navbar />
        <Route path="/backend" element={BackendRoutes} />
    </BrowserRouter>
  );
}

export default App;

Answer 1

You miss history package

yarn add history