I'm following a ReactJS tutorial in which the tutor is using class-based components (not hooks at that point) and react-router-dom which is still using render and component (without using the 'element' keyword)..

So, I found how to downgrade the react-router-dom:

npm install --save [email protected] 

I'm not sure if it's the accurate version in which I can use render/component instead of element, plus, I'm not sure if I need also an older version of create-react-app, and if so, to what version and how I do it?

Regards!

P.S I have tried to follow the tutorial after installing [email protected] (and maintaining npx create-react-app as is), but I got so many errors:

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 (react-dom.development.js:21207:1) at beginWork (react-dom.development.js:21652:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) react-dom.development.js:18687 The above error occurred in the <Router.Consumer> component:

at Route (http://localhost:3000/static/js/bundle.js:40759:29) at div at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about 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 at updateContextConsumer (react-dom.development.js:21207:1) at beginWork (react-dom.development.js:21652:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at recoverFromConcurrentError (react-dom.development.js:25850:1) at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)

CodePudding user response：

Try version npm install --save [email protected] – Here is the sample code for it:

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);