“历史”类型上不存在属性“索引”<unknown> &#39; 使用内存路由器

Question

I'm trying to access the property index from history object when using MemoryRouter , but it generates a Typescript error, since the index attribute is not in the type definitions of history object. Here is the error:

Property 'index' does not exist on type 'History<unknown>'.

But the index attribute is there when I console.log the history object. Here is an example of history's state:

action: "POP"
block: ƒ block(prompt)
canGo: ƒ canGo(n)
createHref: ƒ createPath(location)
entries: (5) [{…}, {…}, {…}, {…}, {…}]
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
index: 0
length: 5
listen: ƒ listen(listener)
location: {pathname: '/app', search: '', hash: '', state: undefined, key: 't5skrl'}
push: ƒ push(path, state)
replace: ƒ replace(path, state)

I know that it is possible to provide a type for useHistory hook, but i've tried doing like useHistory<{ index: number }>() and it didn't solve the problem.

Code example:

import { MemoryRouter, Route, Switch, useHistory } from "react-router-dom"

const App = () => {
  return (
    <MemoryRouter>
      <Switch>
        <Route path="/" component={Page} />
      </Switch>
    </MemoryRouter>
  )
}

const Page = () => {
  const history = useHistory()
  console.log(history.index)

  return (
    <div>Page</div>
  )
}

Answer 1

Import MemoryHistory from the history package and declare the returned history value from useHistory as a MemoryHistory object.

Example:

import { Switch, Route, useHistory } from "react-router-dom";
import { MemoryHistory } from "history";

const Page = () => {
  const history = useHistory() as MemoryHistory;
  console.log(history.index);

  return <div>Page</div>;
};