react-route-dom 不会发出警报或 console.log

Question

所以我正在尝试按照 react-router 给出的示例来获取页面历史记录。

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

但问题是我什至无法运行 consul.log 或警报功能。

我被告知要使用的代码。

    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;

想知道我做错了什么？

Answer 1

路由器 (BroserRouter) 本身并不像 Route 那样采用 component 属性。您应该将 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（高阶组件），因为乍一看您的逻辑目的是增强某些组件。