迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

React 修复 Uncaught Error: You cannot render a Router inside another Router 错误

作者:迹忆客 最近更新:2022/06/22 浏览次数:

当我们在同一个 React 应用程序中有 2 个路由器组件时,会出现错误 “You cannot render a <Router> inside another <Router>“。 要解决此错误,需要确保在 index.js 文件中使用路由器,并且不要使用任何嵌套的路由器组件。

React You cannot render a Router inside another Router

确保 index.js 文件中的 App 组件包含在 Router 组件中。

import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router

root.render(
  <Router>
    <App />
  </Router>
);

并从我们的 App 中移除任何嵌套的 RouterBrowserRouter 组件。

import React from 'react';
import {Route, Link, Routes} from 'react-router-dom';

// 👇️ 不要在 <Router> 进行封装
export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

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

整个 React 应用程序应该只包装在一个 Router(或 BrowserRouter)组件中。

用 Router 组件封装 React 应用程序的最佳位置是在 index.js 文件中,因为这是 React 应用程序的入口点。

一旦我们的整个应用被一个 Router 组件包裹,那么我们就可以在组件的任何地方使用来自 react router 包的任何钩子。

如果找不到使用路由器组件的位置,可以使用 IDE 查找使用 <Router> 的位置。

在 VSCode 中,我们可以使用快捷键 CTRL + Shift + f 搜索 <Router> 并找到必须删除的 Router(或 BrowserRouter)组件的嵌套实例。

我们的 React 应用程序中不应该有多个路由器。

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便