reactjs - react 路由 : Detect route change

Question

我在使用 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;

Answer 1

用 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 设置你的变量根据需要在任一组件中。

1. *, [pathname]
2. **, [pathname]