html 未加载React应用程序;无错误的白屏

inn6fuwd  于 2022-12-02  发布在  React
关注(0)|答案(3)|浏览(145)

希望有人能帮助我,因为我在我的智慧结束试图找出为什么这是没有加载。网站编译没有错误,但然后只是挂起加载和白屏; DOM中也没有任何内容可以指出错误所在。
下面是源代码(https://github.com/Asutherland8219/react-portfolio
Index.js

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

ReactDOM.render(
    <App />
 , document.getElementById('root')
);

App.js

import React from 'react'
import './App.css';
import Navbar from './components/Navbar/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Portfolio from './pages/Portfolio';
import Contact from './pages/Contact';

function App() {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path='/' exact component= {Home}/>
          <Route path='/about' component= {About}/>
          <Route path='/portfolio' component= {Portfolio}/>
          <Route path='/contact' component= {Contact}/>
        </Switch>
      </Router>
   
    );
  }

export default App;
xzlaal3s

xzlaal3s1#

Button组件中存在错误。

<Button
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onclick}
        type={type}
        >
            {children}
        </Button>

您正在Button组件中呈现Button

t1qtbnec

t1qtbnec2#

Navbar文件的第5行说

import { Button } from '../Button/Button.css';

我觉得这很奇怪,这个错误可能是这个错误背后的原因

vsnjm48y

vsnjm48y3#

function App() {
  return (
    <>
      <Header/>
      <Routes>
        <Route path={HOMEPAGE_URL} element={<App/>}/>
        ..........
      </Routes>
    </>
  );
}

在我的例子中,我使用App作为元素的组件,这将像递归函数一样工作,并最终使用poup消息杀死内存。
我第一次遇到这种错误,网站一直在加载,没有任何错误。也许这个答案会帮助有同样问题的人。

相关问题