反应不渲染导入的组件

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>