使用舊版本的 react-router-dom

Question

我正在關注 ReactJS 教程，其中導師使用基於類的組件（此時不是鈎子）和 react-router-dom，它仍在使用渲染和組件（不使用“元素”關鍵字）。

所以，我找到了如何降級 react-router-dom：

npm install --save react-router-dom@5.2.0 

我不確定它是否是我可以使用 render/component 而不是元素的准確版本，另外，我不確定我是否還需要舊版本的 create-react-app，如果需要，是什么版本我該怎么做？

問候！

PS 我在安裝 react-router-dom@5.2.0（並按原樣維護 npx create-react-app）后嘗試按照教程進行操作，但我遇到了很多錯誤：

2tiny-invariant.js:12 Uncaught Error: Invariant failed: You should not use <Route> outside a <Router> at invariant (tiny-invariant.js:12:1) at Route.js:35:1 at updateContextConsumer （反應-dom.development.js:21207:1) 在 Object.invokeGuardedCallbackDev (react- dom.development.js:4213:1) 在 invokeGuardedCallback (react-dom.development.js:4277:1) 在 beginWork$1 (react-dom.development.js:27451:1) 在 performUnitOfWork (react-dom.development. js:26557:1) at workLoopSync (react-dom.development.js:26466:1) react-dom.development.js:18687 <Router.Consumer>組件出現上述錯誤：

在路由 (http://localhost:3000/static/js/bundle.js:40759:29) 在 div 在 App

考慮向樹中添加錯誤邊界以自定義錯誤處理行為。 訪問https://reactjs.org/link/error-boundaries以了解有關錯誤邊界的更多信息。 logCapturedError @ react-dom.development.js:18687 react-dom.development.js:26923 Uncaught Error: Invariant failed: You should not use outside a at invariant (tiny-invariant.js:12:1) at Route.js： 35:1 在 updateContextConsumer (react-dom.development.js:21207:1) 在 beginWork (react-dom.development.js:21652:1) 在 beginWork$1 (react-dom.development.js:27426:1) 在performUnitOfWork (react-dom.development.js:26557:1) 在 workLoopSync (react-dom.development.js:26466:1) 在 renderRootSync (react-dom.development.js:26434:1) 在 recoverFromConcurrentError (react-dom .development.js:25850:1) 在 performConcurrentWorkOnRoot (react-dom.development.js:25750:1)

Answer 1

嘗試版本 npm install --save react-router-dom@4.3.1 – 這是它的示例代碼：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Main from "./Main";
import Menu from "./Menu";

import "./styles.css";

export const Routes = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" render={props => <Main {...props} />} />
        <Route exact path="/home" component={Menu} />
      </Switch>
    </BrowserRouter>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Routes />, rootElement);