反應不渲染匯入的組件

我剛開始嘗試構建一個反應網頁并且在讓我的第一個組件成功呈現時遇到問題。我已經嘗試了許多 json 解決方案，并且想知道此時這是否只是我的代碼中的語法錯誤。任何幫助，將不勝感激。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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


reportWebVitals();

應用程式.js

import './App.scss';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from './components/Layout'


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



export default App;

組件/布局/index.js

import './index.scss';
//import Sidebar from '../Sidebar';

const Layout = () => {
    return (
        <>
        Hello
        </>
    )
}

export default Layout

包.json

{
  "name": "react-portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "proxy": "http://localhost:3000"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我在瀏覽器中收到的錯誤

Uncaught ReferenceError: browser is not defined
    at onScriptLoad (adblock-onpage-icon-cs.js:172:3)
    at adblock-onpage-icon-cs.js:183:2
onScriptLoad @ adblock-onpage-icon-cs.js:172
(anonymous) @ adblock-onpage-icon-cs.js:183
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1630:1)
    at BrowserRouter (index.tsx:151:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)```

uj5u.com熱心網友回復：

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

缺少路由器。React Router 附帶了幾個路由器。

uj5u.com熱心網友回復：

您只需<BrowserRouter>從 index.js 或 App.js中洗掉

標籤：javascript 反应

上一篇：Jquery-在透明影像周圍移動形狀

下一篇：影像跳到最后位置平移運動