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

Posted

技术标签:

【中文标题】React 中的 BrowserRouter 导致“无效的钩子调用”【英文标题】:BrowserRouter in React leading to "invalid hook calls" 【发布时间】: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 【参考方案1】:

登录不是&lt;Route&gt; 组件。 &lt;Routes&gt; 的所有子组件必须是 &lt;Route&gt;&lt;React.Fragment&gt;

试试这个:

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

【讨论】:

以上是关于React 中的 BrowserRouter 导致“无效的钩子调用”的主要内容,如果未能解决你的问题,请参考以下文章

react-router-dom中的BrowserRouter和HashRouter

react-router-dom中的BrowserRouter和HashRouter

React 中的 HashRouter 和 BrowserRouter 有啥区别?

react-router-dom中的BrowserRouter和HashRouter

实现react-router中的BrowserRouter、Route、Link

React BrowserRouter:位置未定义