Question

我正在使用BrowserRouter来管理路由。我有一个函数，当调用它时，我想更改路由而不刷新页面。

import React from 'react';
const myPage: React.FC = (props) => {
  function loadPage(event: any) {
    if (event.target.id) {
      window.history.push('/' + event.target.id)
    }
  return (
    <div id='home' onClick={loadPage}><div/>
    <section> {props.children} </section>
  )
...

即时消息错误为Property 'push' does not exist on type 'History'.ts(2339)

注意：路由器是该元素的子元素，正在传递给props.children

Answer 1

在窗口中的历史对象上没有功能推送。我建议您使用react-router-dom的历史记录或重定向。

import React from 'react';
import { withRouter } from 'react-router-dom';
const myPage: React.FC = (props) => {
  function loadPage(event: any) {
    if (event.target.id) {
      props.history.push('/' + event.target.id)
    }
  return (
    <div id='home' onClick={loadPage}><div/>
  )

然后，最后，在使用Router组件将其导出之前，应先包装您的组件

export default withRouter(myPage);

像这样包裹起来，将可以通过道具访问历史

Answer 2

如果将= IFERROR( INDEX( 'Tab1'!$D$5:$D$337, AGGREGATE( 15, 6, ROW(B:B) / ( ( 'Tab1'!$C$5:$C$337 = $C$6 ) * ( ( 'Tab1'!$N$5:$N$337 > 20 ) + ( 'Tab1'!$O$5:$O$337 > 20 ) + ( 'Tab1'!$P$5:$P$337 > 20 ) <> 0 ) ), ROWS( B$5:B5 ) ) ), "" )组件作为道具传递给myPage组件，例如：<Route>，那么您可以使用{{1 }}导航组件。

<Route exact path="/myPage" component={myPage}>

Answer 3

有效的解决方法是...

window.location.href = '/'+event.target.id;

使用BrowserRouter以编程方式反应TypeScript更改路由

3 个答案: