React TypeScript：使用 react-router-dom 在路由更改时调用函数

Question

我希望 useEffect 能够控制日志，但项目无法编译并在终端出现错误 Unexpected use of 'location' no-restricted-globals 我不必使用 useEffect 如果我能在每次位置更改时触发一个函数会很高兴

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import { Context } from "./components/context";
import { Layout } from "./components/layout";
import { Home } from './routes/home';
import { NotFound } from './routes/not-found';

const Router: React.FC = () => {

  useEffect(() => {
    console.log('location changed')
  }, [location]);

  return (
    <Context.Provider value={{ global, setGlobal }}>
      <BrowserRouter>
        <Route render={({location}) => ( //<-------- this is the location!!!
          <Layout>
            <TransitionGroup>
              <CSSTransition timeout={450} classNames='fade' key={location.key}>
                <Switch location={location}>
                  <Route exact path = '/' component = {Home} />
                  <Route exact path = '/my/profile/' component = {Home} />
                  <Route component = {NotFound}/>
                </Switch>
              </CSSTransition>
            </TransitionGroup>
          </Layout>
        )} />
      </BrowserRouter>
    </Context.Provider>
  );
}

export { Router };

Answer 1

错误是自我描述的。您没有在任何地方声明变量名称location。如果是全局变量，你need to declare就这样：

Filename: global.d.ts
declare var location: type