我在使用 React Router v5 检测路由更改时遇到问题。 期望是,当路由发生变化时,我希望输出一个 console.log。 期望是,当路由发生变化时,我希望在 App 组件的 console.log 中输出该路由(如下面的代码),这样我就可以根据路由在 App.js 中设置一个变量。
包版本:
"dependencies": {
"react": "^16.12.0",
"react-router-dom": "^5.1.2",
}
这是我的路由器当前所在的 App.js 代码:
import React from "react";
import { BrowserRouter as Router, Route, Switch, NavLink } from "react-router-dom"
import "./App.css";
import AdminDashboard from "./pages/AdminDashboard"
import UserList from "./pages/UserList"
function App() {
const routeChange = () => {
console.log("foo!")
console.log(window.location.pathname)
}
return (
<>
<Router onChange={routeChange}>
<NavLink exact={true} className="nav-link" to="/AdminDashboard">Admin Dashboard</NavLink>
<NavLink exact={true} className="nav-link" to="/UserList">User List</NavLink>
<Switch>
<Route path="/AdminDashboard" component={AdminDashboard} exact />
<Route path="/UserList" component={UserList} exact />
</Switch>
</Router>
</>
);
}
export default App;
最佳答案
用 withRouter
包装工作正常,但从 react-router5 开始,他们有钩子(Hook)来避免它。这样我们就不会向组件注入(inject)不需要的 Prop 。
在这种情况下,您可以使用 useLocation
钩子(Hook)。
如果您尝试运行 const location = useLocation()
在 App.js 中你会得到:"TypeError: useContext(...) is undefined" on line 712 of react-router/esm/react-router.js
.但是你可以访问useLocation()
在子组件中(例如 Route.js)并通过属性函数将位置传回给父组件 setPathname()
<Router>
必须在父组件中才能 useLocation()
去工作。
应用程序.js
import React, { useEffect } from "react"
import { BrowserRouter as Router, NavLink} from "react-router-dom"
import "./App.css"
function App() {
const setPathname = (pathname) => {
console.log("**", pathname)
}
return (
<>
<NavLink exact={true} className="nav-link" to="/AdminDashboard">Admin Dashboard</NavLink>
<NavLink exact={true} className="nav-link" to="/UserList">User List</NavLink>
<Router onChange={routeChange}>
<Routes setPathname={setPathname} />
</Router>
</>
);
}
export default App
路由.js
import React from "react"
import { Router, Route, Switch, NavLink, useLocation } from "react-router-dom"
import AdminDashboard from "./pages/AdminDashboard"
import UserList from "./pages/UserList"
function Routes(props) {
const location = useLocation()
useEffect(() => {
console.log("*", location.pathname)
props.setPathname(location.pathname)
},[location])
return (
<>
<Switch>
<Route path="/AdminDashboard" component={AdminDashboard} exact />
<Route path="/UserList" component={UserList} exact />
</Switch>
</>
);
}
export default Routes
此操作的结果将为您提供两个控制台日志。一个来自子 Routes.js,一个来自父 App.js。然后你可以根据 pathname
设置你的变量根据需要在任一组件中。
-
*, [pathname]
-
**, [pathname]
关于reactjs - react 路由 : Detect route change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60441226/