reactjs - react-route-dom 不会发出警报或 console.log
问题描述
因此,我试图按照 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;
想知道我做错了什么?
解决方案
路由器(BroserRouter)本身并没有component
像这样使用道具Route
。您应该将您的添加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>
);
}
需要注意的一件事是您缺少可能会使您的应用程序崩溃的render
方法实现。Comp
您可能会考虑稍后将您的Comp
变成 HOC(高阶组件),因为乍一看您的逻辑目的是增强某些组件。
推荐阅读
- php - 根据 2 个子值对 PHP 数组值进行分组
- python - google or-tools 无法获得最佳 LP 结果,如 gurobi 示例
- c# - Visual Studio 将自动对以下项目进行功能更改以打开它们
- javascript - 编写 JavaScript 时缺少 Visual Studio 的 IntelliSense
- python - 在 Python 中循环一个函数
- excel - 将分隔文本转换为 csv
- java - 我可以在构建它的 CellValueFactory 时检查 TableCell 的内容是否会溢出
- wpf - 文本块问题上的圆形边框
- angular - Angular:当计数器变量值为0时调用方法
- vb.net - 双重转义转义 - 使用字节