反應不渲染導入的組件

Question

我剛開始嘗試構建一個反應網頁並且在讓我的第一個組件成功呈現時遇到問題。 我已經嘗試了許多 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)```

Answer 1

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

缺少路由器。 React Router 附帶了幾個路由器。 您可以在文檔中了解有關它們的更多信息。 沒有路由器，它就無法渲染路由。

如果您想使用BrowserRouter ， App.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;

Answer 2

這是由於在項目文件夾之外意外安裝了依賴項。 建立一個全新的項目並成功安裝了所有東西，並且能夠成功運行。

Answer 3

您只需從 index.js 或 App.js 中刪除<BrowserRouter>