在使用浏览器路由器时获取空白页面，并且在不使用浏览器路由器进行路由时它正在工作答案

【问题标题】：Getting blank page on using browser router and it's working when not using browser router for routing在使用浏览器路由器时获取空白页面，并且在不使用浏览器路由器进行路由时它正在工作
【发布时间】：2022-01-12 18:08:26
【问题描述】：

在吊唁中说：

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

您可能有不匹配的 React 版本和渲染器（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用中拥有多个 React 副本

import './App.css';
import Home from './pages/home';
import Navbar from './components/navbar';
import { BrowserRouter, Router, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Navbar />
      <BrowserRouter>
        <Router>
          <Route path="/home" element={<Home />} />
        </Router>
      </BrowserRouter>

    </div>
  );
}

export default App;

【问题讨论】：

您在导航栏中使用的是<Link /> 还是<NavLink /> 组件？如果是这样，您需要将其移动到'<BrowserRouter> 内。还有<Router>应该是<Routes>。
没有链接或导航链接我只在导航栏中使用锚标签，我已经尝试在中移动导航栏，但它不起作用。
错字，您使用的是由BrowserRouter 包裹的第二个路由器，整个应用程序只需要一个路由器。将Router 切换为Routes，以便Route 被Routes 组件正确包装。钩子警告是因为您没有将所需的道具传递给Router。投票结束为“不可复制或由错字引起”。干杯。
实际上在中使用是我在互联网上找到的语法。上面说是react router version 6及以上之后的语法，所以我觉得不是错字
你在互联网上找到的内容是不正确的。在 RRDv6 中，在另一个路由器中渲染任何路由器是一种不变的违规行为。

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

【解决方案1】：

尝试将“Router”更改为“Routes”。还要在“Route”-Component 中使用“exact”。

我总是这样。

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Home } from './components/home/Home';

...

<Router>
  <Routes>
    <Route path="/" exact element={<Home></Home>} />
  </Routes>
</Router>
...

如果这没有帮助，您可以在这里找到您的解决方案：https://reactjs.org/warnings/invalid-hook-call-warning.html#:~:text=Hooks%20can%20only%20be%20called,of%20React%20and%20React%20DOM.&text=You%20might%20have%20more%20than,React%20in%20the%20same%20app.

【讨论】：

RRDv6 路由总是完全匹配。 Route 组件也没有 exact 属性。