Реагировать - обнаружить предыдущее местоположение на верхнем уровне компонента приложения?

Question

Мне нужно проверить наличие изменений в моем приложении, чтобы я мог показать компонент после того, как пользователь уходит с определенной страницы. Компоненты внутри <Router> имеют доступ к переменным местоположения, но как получить доступ к переменным местоположения на верхнем уровне, вне <Router>? Вот некоторый псевдо-код для того, что я пытаюсь выполнить sh -

export const App = () => {
  const [showComponent, setShowComponent] = useState(false)  

  useEffect(() => {
    if (/* previous location === x */) {
      setShowComponent(true)
    }
  })

  return (
    <div>
      <Router>
        <Switch>
          ...
        </Switch>
      </Router>
      {showComponent && <Component />}
    </div>
  )
} 

Answer 1

Вы не можете получить к ним доступ вне маршрутизатора (по крайней мере, через библиотеку ...). Просто переместите зависимость вверх по дереву. Вот пример :

index. js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  rootElement
);

Приложение. js

import { withRouter, Switch } from "react-router-dom";
import React from "react";
import "./styles.css";

function App({ history, location }) {
  console.log(history, location);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Switch>{/* Add routes here */}</Switch>
    </div>
  );
}

export default withRouter(App);