React-Router (experimental v6) 渲染問題？

Question

我最近為我正在制作的簡單 SPA 安裝了 react-router 和 react-router-dom 實驗版本。 安裝后，開發服務器編譯並啟動得很好：

Compiled successfully!

You can now view rcg in the browser.

但是，在本地主機上的瀏覽器中，我得到以下信息：

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>,

還有其他幾個塊，但我想知道問題是否出在上述兩個塊上。 任何人都知道問題可能是什么？ 會不會是由於我一時沖動切換到實驗性 react-router 和 react-router-dom 造成的？

另外：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"

應用程序.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

你錯過了history package

yarn add history