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;

React App网站页面仅在刷新时加载

1 个答案: