带有 Router DOM 的 Next.js

Question

我想在导航中获取代码的结果，但它似乎返回一个可怕的错误：未处理的运行时错误

错误：您无法在另一个

<Router>

中渲染

<Router>

。你 您的应用程序中不应有多个。

"use client";
import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from '@/components/main/Main';
import Sidebar from "@/components/sidebar/Sidebar";
import { Blog } from "@/pages/blog/Blog";

export default function Home() {
  return (
    <BrowserRouter>
      <Sidebar />
      <Main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/blog/[id]" element={<Blog />} />
        </Routes>
      </Main>
    </BrowserRouter>
  )
}

我尝试获取结果，但我无法帮助我

Answer 1

这里的问题是

Home

组件正在递归地渲染自身。

更新

"/"

路由以渲染除另一个

Home

组件之外的任何内容，或者如果不需要则将其删除。

"use client";

import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from '@/components/main/Main';
import Sidebar from "@/components/sidebar/Sidebar";
import { Blog } from "@/pages/blog/Blog";

export default function Home() {
  return (
    <BrowserRouter>
      <Sidebar />
      <Main>
        <Routes>
          <Route
            path="/"
            element={/* Anything other than Home again */} // <--
          />
          <Route path="/blog/:id" element={<Blog />} />
        </Routes>
      </Main>
    </BrowserRouter>
  );
}