如何在 React 中正确使用 BrowserRouter？

Question

我正在创建一个 React 项目，我想实现 BrowserRouter，但问题是当我使用它时，它总是抛出 React 错误：

***错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本 有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。***

我不知道这是怎么回事，因为据我所知，我没有使用钩子，我阅读了文档和其他教程来解决这个问题（比如删除双重反应或 npm link 就是这样) 但这仍然是个问题。

这是我的文件。

App.js

import { BrowserRouter, Route, Routes, Link } from "react-router-dom";

import Navbar from "./components/navbar"
import Login from "./components/login";
// import CreateExercise from "./components/create-exercise.component";
// import CreateUser from "./components/create-user.component";

function App() {
  return (
    // <h1>HOASNKFNLSA</h1>
    // <div>
    //   <Home/>
    
    // </div>
    <BrowserRouter>
      <Routes>
      <Route path="/" render={() => {
      <h1>HOKAKSFNAKSO</h1>
    }}>

    </Route>
    </Routes>
    </BrowserRouter>
    
    
    
  );
}

function Home() {
  return (
    <div className="container text-center"> 
      <h1>KEVIN STYLE PELUQUERIA</h1>
      
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

package.json

{
  "name": "kevin-style-peluqueria",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "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"
    ]
  }
}

我不知道您是否需要其他任何东西，但如果您需要，请在 cmets 中问我。如果您需要了解更多额外信息，我没有使用 webpack。当您执行命令 npx create-react-app 时，我正在使用经典的 React 结构应用程序。我还使用 express 和 MongoDB 作为我的后端（基本上我正在使用 MERN Stack 创建一个应用程序）。

Answer 1

你应该这样做。 并通过示例查看to the docs

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
     <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();