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

【问题标题】：React-Router (experimental v6) render problem?React-Router (experimental v6) 渲染问题？
【发布时间】：2020-06-02 14:26:55
【问题描述】：

我最近为我正在制作的一个简单的 SPA 安装了 react-router 和 react-router-dom 实验版本。安装后，开发服务器编译并启动正常：

Compiled successfully!

You can now view rcg in the browser.

但是，在 localhost 上的浏览器中，我得到以下信息：

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"

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;

【问题讨论】：

@types/react-router 和/或 @types/react-router-dom 可能不匹配？
我该如何检查？
他们没有 v6 的@types，你可以尝试检查它是否适用于 js 而不是 ts

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

你错过了history 包

yarn add history

【讨论】：

必要但不充分。