如何通過制作鏈接修復Reactjs的錯誤-有解無憂

如何通過制作鏈接修復 Reactjs 的錯誤

你好！我嘗試在反應中進行鏈接，并且一直在螢屏上出現錯誤，因為螢屏上至少有 8 個，有時我得到 32 個，但我不知道如何修復

應用程式.jsx

import { Layout } from "./Components/Layout";

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

function App() {
  return (
    <>
        <Routes>
            <Route path="/" element={<Layout />} />
        </Routes>
    </>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

布局.jsx

import { Link, Outlet } from 'react-router-dom'

const Layout = () => {
  return (
    <>
        <header>
            <Link to="/">Home</Link>
            <Link to="/posts">Blog</Link>
            <Link to="/about">About</Link>
        </header>
    </>

  )
}

export {Layout}

我使用 Youtube 和官方檔案中的教程制作的這段代碼，但它不起作用。

請幫忙。感謝

uj5u.com熱心網友回復：

您應該在路由器背景關系下使用所有與路由相關的操作。您可以通過將BrowserRouter組件用作<App />.
您可以在此處找到更多資訊：https ://reactrouter.com/en/main/router-components/browser-router

uj5u.com熱心網友回復：

路由應該由BrowserRouter組件包裝。它應該如下所示：

import { Layout } from "./Components/Layout";

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

function App() {
return (
      <>
        <BrowserRouter>
            <Routes>
              <Route path="/" element={<Layout />} />
            </Routes>
        </BrowserRouter>
      </>
  );
}

匯出默認應用

uj5u.com熱心網友回復：

在 index.JS 中匯入 BrowserRouter 并用它替換 React.StrictMode。嚴格模式會導致多次渲染，所以我通常會擺脫它。

import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from “react-router-dom”;


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/514807.html

標籤：javascript反应反应式反应钩子

上一篇：反應onChange沒有被調度的事件觸發

下一篇：當我嘗試使用反引號并映射到我的物件陣列時，ReactJS呈現[objectObject]