React 中的 BrowserRouter 导致“无效的钩子调用”答案

【问题标题】：BrowserRouter in React leading to "invalid hook calls"React 中的 BrowserRouter 导致“无效的钩子调用”
【发布时间】：2022-01-20 19:48:05
【问题描述】：

我是 React 新手，我正在尝试使用 BrowserRouter、Route 和 Routes 设置路径。到目前为止，我的代码如下所示

import React from "react"
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from "./Login";

function App() {

    return (
    <div className="App">
        <h1>App page</h1>
        <Router>
            <Routes>
                <Route exact path="/login">
                     <Login />
                </Route>
            </Routes>
        </Router>
    </div>
  )
}

export default App

但是，浏览器页面上没有显示任何内容 - 控制台输出如下所示

错误似乎与路由器位有关，因为当我取出这些行时，h1 标记中的内容似乎打印正常。您知道如何解决这个问题/可能是什么原因造成的吗？

谢谢！

【问题讨论】：

能分享一下package.json的内容吗？
...或者更好地附加命令npm ls react react-dom的输出；我认为您可能安装了多个版本的 React 和/或 React-Dom

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

【解决方案1】：

登录不是<Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>。

试试这个：

import React from "react"
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from "./Login";

function App() {

    return (
    <div className="App">
        <h1>App page</h1>
        <Router>
            <Routes>
                <Route exact path="/login" element={<Login />}/>
            </Routes>
        </Router>
    </div>
  )

【讨论】：