如何解决URL发生更改,但组件未使用react呈现-Typescript
我正在尝试以编程方式更改URL。
URL更改了,但是页面没有刷新/渲染。 我已经尝试了2个多小时的正确答案,但没有成功。我看到URL确实发生了变化,但是组件没有刷新。 我的布局组件如下所示:
export default class Layout extends Component {
public render() {
return (
<browserRouter>
<section className="layout">
<header>
<Header />
</header>
<main>
<Switch>
<Route path="/login" component={Login} exact />
<Route path="/register" component={Register} exact />
<Route path="/home" component={Main} exact />
<Redirect from="/" to="/home"></Redirect>
</Switch>
</main>
<footer>
<Footer />
</footer>
</section>
</browserRouter>
);
}
}
我的主要组件如下:
import React,{ Component } from "react";
import './main.css'
import history from 'history/browser';
interface MainProps {
registerButton: string,loginButton: string;
}
export default class Main extends Component<MainProps,any>{
public constructor(props: MainProps) {
super(props);
}
public render() {
return (
<div className="main">This is the Main Section
<div>
<button onClick={this.onRegisterButtonClicked}>REGISTER</button>
<button onClick={this.onLoginButtonClicked}>LOGIN</button>
</div>
</div>);
}
private onLoginButtonClicked = () => {
history.push('/login');
}
private onRegisterButtonClicked = () => {
}
}
解决方法
好!
我试图删除界面(只是为了扩展没有道具的组件)
export default class Main extends Component<any>
,然后识别出命令:“ this.props.history ....”。
Soooooo我了解,如果我想实现自己的道具,则必须在界面中添加另一个字段:
interface MainProps {
history: BrowserHistory // This is the most important think
registerButton: string,loginButton: string;
}
然后一切正常:
export default class Main extends Component<MainProps>{
private onRegisterButtonClicked = () => {
this.props.history.push('/register');
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。