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】:
登录不是<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>
)
【讨论】:
以上是关于React 中的 BrowserRouter 导致“无效的钩子调用”的主要内容,如果未能解决你的问题,请参考以下文章
react-router-dom中的BrowserRouter和HashRouter
react-router-dom中的BrowserRouter和HashRouter
React 中的 HashRouter 和 BrowserRouter 有啥区别?
react-router-dom中的BrowserRouter和HashRouter