【问题标题】:React app not loading; whitescreen with no errors反应应用程序未加载;白屏没有错误
【发布时间】:2021-10-17 18:08:42
【问题描述】:

希望有人可以帮助我,因为我正在竭尽全力试图弄清楚为什么没有加载。该站点编译没有错误,但只是挂起加载和白屏; DOM 中也没有任何内容可以指出问题所在。

这里是源代码(https://github.com/Asutherland8219/react-portfolio

索引.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;

【问题讨论】:

  • 你应该调试Navbar

标签: javascript html reactjs react-router


【解决方案1】:

您的Button 组件中有错误。

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

您正在Button 组件中渲染Button

【讨论】:

    【解决方案2】:

    Navbar 文件的第 5 行显示

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

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

    【讨论】:

    • 这不是直接的错误,但它确实指向了我有大写错字的 button.js。 IE。调用 Button 而不是 button 谢谢!
    • 恭喜,下次也尝试上传codeandbox链接。它将带来更快、更有帮助的答案
    猜你喜欢
    • 2022-06-10
    • 2021-03-13
    • 1970-01-01
    • 2022-11-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-13
    相关资源
    最近更新 更多