React 应用程序网站页面仅在刷新时加载

Posted 2023-02-22

【中文标题】React 应用程序网站页面仅在刷新时加载

【英文标题】：React app website page only loads upon refresh

【发布时间】：2020-12-26 17:20:20

【问题描述】：

在我的网站上一切正常，除了每次要正确呈现页面我都必须刷新我的页面。我已经尝试了许多解决方案，但没有任何效果。

这是应用组件的代码。

function App() 
return (
 <BrowserRouter>
  <Switch>
    <Route path="/" exact component=Home />
      <Route path="/about" component=About />
      <Route path="/skills" component=Skills />
      <Route path="/projects" component=Projects />
      <Route path="/work" component=Work />
      <Route path="/blogs" component=Blogs />
      <Route path="/blogs/blog-details"component=BlogDetails/>
       <Route path="/contact" component=Contact />
   </Switch>
  </BrowserRouter>
 );


export default App;

请有人帮忙，这样当我访问每个页面时，它都能正常工作！

【问题讨论】：

您是否尝试过将 App 组件创建为类组件并在渲染方法中创建路由？

类似下面的解决方案？

是的，你需要使用 class App extends React.Component 或者你需要从 react 库中导入组件，比如 "import React, Component from 'react';"

【参考方案1】：

请尝试以下方法

import React,  Component  from 'react';
import  BrowserRouter as Router, Switch, Route  from 'react-router-dom'; 
import Home from './home'; //Full path of your page
import About from './about'; //Full path of your page
import Skills from './skills'; //Full path of your page
import Projects from './projects'; //Full path of your page
import Work from './work'; //Full path of your page
import Blogs from './blogs'; //Full path of your page
import BlogDetails from './blogs/blog-details'; //Full path of your page
import Contact from './contact'; //Full path of your page

class App extends Component 
  render() 
    return (
      <Router>
        <Switch>
            <Route path="/" exact component=Home />
            <Route path="/about" component=About />
            <Route path="/skills" component=Skills />
            <Route path="/projects" component=Projects />
            <Route path="/work" component=Work />
            <Route path="/blogs" component=Blogs />
            <Route path="/blog-details"component=BlogDetails/>
            <Route path="/contact" component=Contact />
        </Switch>
      </Router>
    );
  


export default App;

【讨论】：

它说组件未定义:((

您需要定义每个组件并使用正确的路径导入。

我已经这样做了，但是错误出现在“App extends Component”这一行

@A.G 请检查您是否添加了“import React, Component from 'react';”在您的导入之上。

是的，添加了，似乎比以前更好，但偶尔还是会出现黑屏，然后我必须重新加载页面才能正常工作。