Реактивная маршрутизация: обнаружение изменения маршрута

Question

У меня проблемы с обнаружением изменений маршрута с помощью React Router v5. Желание, чтобы при изменении маршрута я хотел вывести файл console.log. Желание, чтобы при изменении маршрута я хотел вывести этот маршрут в console.log в компоненте приложения (как показано в коде). ниже), поэтому я могу затем установить переменную в приложении. js на основе маршрута.

Версии пакета:

"dependencies": {
   "react": "^16.12.0",
   "react-router-dom": "^5.1.2",
}

Это код приложения. 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 работает нормально, но от реакции-маршрутизатора 5 у них есть хуки, чтобы этого избежать. чтобы мы не вводили ненужные реквизиты в компонент. В этом случае вы можете использовать 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

Результат этого даст вам два консольных бревна. Один из дочерних маршрутов. js и один из родительского приложения. js. Затем вы можете при необходимости установить переменную на основе pathname в любом компоненте.

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

Answer 2

Я думаю, вам нужно ie подключить маршрутизатор к компоненту, используя withRouter ..

withRouter, будет передавать обновленные совпадения, местоположение и историю в завернутый компонент всякий раз, когда он рендерится .

https://reacttraining.com/react-router/web/api/withRouter

Answer 3

назначить обратный вызов на props.history.listen свойство history обнаружит изменения и сработает ваш обратный вызов