React Router只有在刷新页面后才能正常工作。

47 浏览
0 Comments

React Router只有在刷新页面后才能正常工作。

我对React还比较陌生，遇到了一个关于Router的问题。

当我直接在浏览器中输入URL时，路由正常工作，但是当我点击链接时，浏览器的URL会改变（例如http://localhost:8080/contactus），但是页面内容不会更新（但是如果我刷新页面，内容就会更新）。

这是我的github存储库：

https://github.com/Arefaat18/Project

这是我的MainComponent.js

import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRouter,BrowserRouter as Router} from 'react-router-dom';
import Header from './HeaderComponent';
import ContactUs from './ContactUsComponent';
import AboutUs from './AboutUsComponent';
import Home from './HomeComponent.js';
import {connect} from 'react-redux';  
class Main extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        
        

        
          
            
              
              
              
              
            
          
        
        
    );
  }
}
export default withRouter(Main);

这是我的App.js文件

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import {ConfigureStore} from './components/configureStore';
const store = ConfigureStore();
class App extends Component {
  render() {
    return (
      
        
            

        
      
    );
  }
}
export default App;

这是相关的依赖项

"react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.1",
    "react-redux-form": "^1.16.14",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.4",

这是我的ContactUsComponent，其他组件只是文本不同而已

import React, { Component } from 'react';
class ContactUs extends Component {
    render(){
        console.log("RENDER");
        return (
                
 联系我们

        );
    }
}
export default ContactUs;

提前感谢。

0