javascript - 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 (
<div>
<Router>
<Header />
<TransitionGroup>
<CSSTransition classNames="page" timeout={300}>
<Switch>
<Route path="/home" component={Home} />
<Route exact path = "/contactus" component ={ContactUs} />
<Route exact path = "/aboutus" component ={AboutUs} />
<Redirect to="/home" />
</Switch>
</CSSTransition>
</TransitionGroup>
</Router>
</div>
);
}
}
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 (
<Provider store={store}>
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
</Provider>
);
}
}
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 (
<div>
<h1> Contact Us</h1>
</div>
);
}
}
export default ContactUs;
提前致谢。
解决方案
对,你已经声明了无关Router
的 s,你的标题组件有一个。删除这个Router
。
这是因为每个都提供了一个Router
路由上下文,并且每个订阅路由上下文的组件都从最近的路由器获取上下文。为标头提供上下文的路由器没有呈现任何路由,这就是为什么 URL 会更改但实际呈现s 的路由器没有被通知它应该呈现不同的路径。Route
class Header extends Component {
constructor(props) {
...
}
...
render() {
return (
<React.Fragment>
{/* <Router> */} // <-- Remove this Router Component
<Navbar dark expand="md">
...
</Navbar>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
...
</Modal>
{/* </Router> */}
</React.Fragment>
);
}
}
推荐阅读
- ruby-on-rails - 错误:Thor:Class 的未定义方法“deprecation_warning”
- jquery - 当我在服务器上部署我的 laravel 项目时,出现此错误 try{r.send(i.hasContent&&i.data||null) 但在我的本地主机上它运行良好
- ubuntu - 包含绝对路径时的重复性 FilePrefixError
- python-3.x - 如何在 Ubuntu 服务器 18.04 中安装 tensorflow 1.15.0
- asp.net-mvc - 如何使用 ASP.NET Core 3.0 将数据从控制器发送到 cshtml
- xamarin - 如何仅在 xamarin.forms 中使用微调器项目选择打开另一个活动?
- regex - bash中的RegEx有问题吗?
- linux-capabilities - 在 clone(2)、unshare(2) 和 setns(2) 期间将更改哪些进程/线程功能集?
- haskell - 我们如何限制 Haskell 中的递归调用?
- xml - 如何通过 Spring Boot Rest 在 XML 中添加指向 xsl 视图的链接?