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

Question

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

这是应用组件的代码。

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;

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

Answer 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;