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');
    }
}