警告:请使用“要求(”历史“”).createBrowserHistory`，而不是“要求”(“历史/创建浏览历史”)

Question

嗨，我收到这个警告，我希望这个警告被解决，不会显示在控制台选项卡上，这样我就可以上传我的代码到netlify，并且只要我已经阅读了netlify的文档和策略，它就说警告和错误可能是它无法上传的原因，所以我需要解决这个问题。

index.js文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Link } from 'react-browser-router';
import "../src/assets/css/index.scss";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

package.json

{
  "name": "daryaft-yar",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "lodash": "^4.17.21",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-browser-router": "^2.1.2",
    "react-cookie": "^4.1.1",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-paginate": "^8.1.4",
    "react-scripts": "5.0.1",
    "sass": "^1.55.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

app.js

import './App.css';
import { Switch, Route, Redirect } from 'react-router-dom';
import React, { Component } from 'react';
import Shop from './Components/shop-bot/shop';
import Home from './Components/shop-bot/botHome';
import Coin from './Components/Coin/coin';
import Wallet from './Components/Wallet/wallet';
import AddCoin from './Components/AddCoin/add-coin';
import Cart from './Components/cart/cart';
import FinalCart from './Components/final-cart/final-cart';
import UserForm from './Components/user-from/user-form';
class App extends Component {
  componentDidMount() {
  }
  render() {
    return (
      <React.Fragment>
        <Switch >
          <Route path="/bot/shop" component={Shop}/>
          <Route path="/bot/home"  component={Home} />
          <Route path="/bot/coin"  component={Coin} />
          <Route path="/bot/buy-coin"  component={AddCoin} />
          <Route path="/bot/wallet" component={Wallet} />
          <Route path="/bot/cart" component={Cart} />
          <Route path="/bot/cart-final" component={FinalCart} />
          <Route path="/bot/user-data" component={UserForm} />
          <Redirect from="/" exact to="/bot/shop" />
        </Switch>
      </React.Fragment>
    );
  }
}
export default App;

Answer 1

老实说，"react-browser-router": "^2.1.2",在package.json文件中似乎是个错误。

1. 我不认为
2. 你缺少react-router-dom作为依赖。

我建议卸载react-browser-router并安装react-router-dom@5，以便仍然可以导入Switch和Redirect组件。安装最新的RRDv5很重要，因为react@18和v5.3.3下面的React.StrictMode组件和RRDv5版本都有潜在的问题，如果不指定v5，那么将安装最新的v6版本，这会带来很多破坏。

从根目录中的终端运行：

npm uninstall --save react-browser-router
npm install --save react-router-dom@5

更新index.js文件以从react-router-dom导入BrowserRouter。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import "../src/assets/css/index.scss";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

从这里开始，您应该在本地重新启动应用程序，以确保在再次部署应用程序之前一切正常。