Reactjs 反应路线dom-won'；t alert或console.log

所以我试着按照react router给出的示例来获取页面历史记录

基本上，我想做的是当用户通过example.com/life访问网站时，这是用户第一次访问，我需要一个自定义脚本来运行

但问题是我甚至无法运行consur.log或alert函数

我被告知要使用的代码

    class Comp extends React.Component {
      componentDidUpdate(prevProps) {
        // will be true
        const locationChanged =
          this.props.location !== prevProps.location;
    
          console.error("this is where the location would run");
          alert("test"+locationChanged);
    
      }
    }

以及我是如何实现它的

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import withTracker from './tracker';
import Header from './Header'; 
import Footer from './components/Footer'; 
import NavBar from './Navbar'; 
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Show from './components/Shows';
import Programs from './components/Programs';
import News from './components/News';
import Events from './components/Events';
import EventListing from './components/EventListing';
import NewsTopic from './components/NewsTopic';
import NewsArtical from './components/NewsArtical';
import Competitions from './components/Competitions';
import Stations from './components/pages/Stations';
import OurApp from './components/pages/Downloadapp';
import NoMatch from './components/NoMatch';
import Contact from './components/Contact';
/* INSERT COMPETITIONS*/
import TheVault from './components/competitions/TheVault';
/* END COMPETITIONS */

import Advertise from './components/Advertise';
import Songwars from './components/Songwars';
import Admin from './components/Admin';
import PrivacyPolicy from './components/pages/Privacypolicy';

const theme = createMuiTheme({
  palette: {
    primary1Color: "#fff",
    primary2Color: "#c62828",
    accent1Color: "#ffffff",
    pickerHeaderColor: "#fce4ec",
  },
});

class Comp extends React.Component {
  componentDidUpdate(prevProps) {
    // will be true
    const locationChanged =
      this.props.location !== prevProps.location;

      console.error("this is where the location would run");
      alert("test"+locationChanged);

    // INCORRECT, will *always* be false because history is mutable.
    /*const locationChanged =
      this.props.history.location !== prevProps.history.location;

      alert(locationChanged);
      */
  }
}


function App() {
  return (
      <Router component={Comp} >
        <ThemeProvider theme={theme}>
        <Header/>
        <NavBar />
        <Switch>
                  <Route path="/" exact component={withTracker(Home)} />
                  <Route path="/about" component={withTracker(About)} />
                  <Route exact path="/shows" component={withTracker(Show)} />
                  <Route path="/shows/:name" component={withTracker(Programs)} />
                  <Route exact path="/news" component={withTracker(News)} />
                  <Route exact path="/events" component={withTracker(Events)} />
                  <Route path="/events/:URL" component={withTracker(EventListing)} />
                  <Route exact path="/competitions" component={withTracker(Competitions)} />
                  <Route path="/competitions/thevault" component={withTracker(TheVault)} />
                  <Route path="/news/category/:URL" component={withTracker(NewsTopic)} />
                  <Route path="/news/:URL" component={withTracker(NewsArtical)} />
                  <Route exact path="/contact" component={withTracker(Contact)} />
                  <Route exact path="/advertise" component={withTracker(Advertise)} />
                  <Route exact path="/songwars" component={Songwars}/>
                  <Route exact path="/privacypolicy" component={withTracker(PrivacyPolicy)}/>
                  <Route exact path="/downloadapp" component={withTracker(OurApp)} />
                  <Route exact path="/stations" component={withTracker(Stations)} />
                  <Route exact path="/admin" component={withTracker(Admin)} />
                  <Route component={withTracker(NoMatch)} />
        </Switch> 

        <Footer/>
    </ThemeProvider>
    </Router>
  );
}


export default App;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从'@material ui/core/styles'导入{createMuiTheme}；
从'@material ui/styles'导入{ThemeProvider}；
从“/tracker”导入withTracker；
从“./头”导入头；
从“./components/Footer”导入页脚；
从“/NavBar”导入导航栏；
导入“/App.css”；
从“./components/Home”导入Home；
从“./components/About”导入关于；
从“./components/Shows”导入显示；
从“./组件/程序”导入程序；
从“/components/News”导入新闻；
从“./components/Events”导入事件；
从“/components/EventListing”导入事件列表；
从“./components/NewsTopic”导入新闻主题；
从“./components/NewsArtial”导入新闻文章；
从“./组件/竞赛”导入竞赛；
从“./组件/页面/站点”导入站点；
从“./components/pages/Downloadapp”导入我们的应用程序；
从“./components/NoMatch”导入NoMatch；
从“./components/Contact”导入联系人；
/*插入比赛*/
从“./components/competitions/TheVault”导入Vault；
/*比赛结束*/
从“./组件/播发”导入播发；
从“/components/Songwars”导入Songwars；
从“./components/Admin”导入管理员；
从“/components/pages/PrivacyPolicy”导入PrivacyPolicy；
const theme=createMuiTheme({
调色板：{
原色：“fff”，
原色：“c62828”，
重音1颜色：“ffffff”，
pickerHeaderColor:#fce4ec“，
},
});
类Comp.Component{
componentDidUpdate（prevProps）{
//这将是真的
const位置已更改=
this.props.location！==prevProps.location；
console.error（“这是位置将运行的地方”）；
警报（“测试”+位置更改）；
//不正确，将*始终*为false，因为历史是可变的。
/*const位置已更改=
this.props.history.location！==prevProps.history.location；
警报（位置更改）；
*/
}
}
函数App（）{
返回(
);
}
导出默认应用程序；

想知道我做错了什么吗？

路由器（）本身不像

路由那样使用
组件
道具。您应该将您的
Comp
作为孩子添加：

function App() {
  return (
      <Router component={Comp} >
        <ThemeProvider theme={theme}>
        <Comp />
        <Header/>
        <NavBar />
        <Switch>
                  <Route path="/" exact component={withTracker(Home)} />
                  <Route path="/about" component={withTracker(About)} />
                  <Route exact path="/shows" component={withTracker(Show)} />
                  <Route path="/shows/:name" component={withTracker(Programs)} />
                  <Route exact path="/news" component={withTracker(News)} />
                  <Route exact path="/events" component={withTracker(Events)} />
                  <Route path="/events/:URL" component={withTracker(EventListing)} />
                  <Route exact path="/competitions" component={withTracker(Competitions)} />
                  <Route path="/competitions/thevault" component={withTracker(TheVault)} />
                  <Route path="/news/category/:URL" component={withTracker(NewsTopic)} />
                  <Route path="/news/:URL" component={withTracker(NewsArtical)} />
                  <Route exact path="/contact" component={withTracker(Contact)} />
                  <Route exact path="/advertise" component={withTracker(Advertise)} />
                  <Route exact path="/songwars" component={Songwars}/>
                  <Route exact path="/privacypolicy" component={withTracker(PrivacyPolicy)}/>
                  <Route exact path="/downloadapp" component={withTracker(OurApp)} />
                  <Route exact path="/stations" component={withTracker(Stations)} />
                  <Route exact path="/admin" component={withTracker(Admin)} />
                  <Route component={withTracker(NoMatch)} />
        </Switch> 

        <Footer/>
    </ThemeProvider>
    </Router>
  );
}

函数应用程序（）{
返回(
);
}

需要注意的是，您缺少
Comp
上的
render
方法实现，这可能会使应用程序崩溃

你可以考虑把你的<代码> COMP <代码>变成一个HOC（高阶组件），因为乍一看，你的逻辑目的是增强某些组件。