React Router 5.1 - хук useLocation - определение прошлых местоположений

Question

Согласно документации React Router 5.1 должно быть возможно увидеть, «где приложение сейчас, где вы хотите, go или даже где оно было». В моем приложении мне нужно увидеть, «где это было» - какие места я посетил до приземления в указанном c месте.

Точнее; Я использую sh, чтобы найти предыдущее местоположение, соответствующее определенному шаблону. Это может быть два или три места a go.

Однако - я не могу понять, как это сделать.

Каков наилучший и рекомендуемый подход для достижения этой цели?

С уважением / K

Answer 1

Вы можете проверить этот пример. Надеюсь, это вам поможет.

import React from "react";
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import { withRouter } from "react-router";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

const About = withRouter(({history, ...props}) => (
  <h1 {...props}>
    About
    <hr/>
    <button onClick={() => {history.push('/')}}>go back</button>
  </h1>
));

Другой пример возврата -2

import React from "react";
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {withRouter} from "react-router";

export default function BasicExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/about/insideabout">Inside About</Link>
                    </li>
                </ul>
                <hr/>
                <Switch>
                    <Route exact path="/">
                        <Home/>
                    </Route>
                    <Route exact path="/about">
                        <About/>
                    </Route>
                    <Route path="/about/insideabout">
                        <InsideAbout/>
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}

const About = withRouter(({history, ...props}) => (
    <div>
        <h1>
            About
            <hr/>
            <button onClick={() => {
                // history.push('/')
                history.goBack(-1);
            }}>go back
            </button>
        </h1>
    </div>
));

const InsideAbout = withRouter(({history, ...props}) => (
    <h1 {...props}>
        Inside About
        <hr/>

        <button onClick={() => {
            history.goBack();
        }}>go back
        </button>
        <button onClick={() => {
            history.go(-2);
        }}>go home
        </button>
    </h1>
));

Answer 2

Для меня лучший способ узнать, где было приложение, - это просто использовать свойство состояния в React Router Link .

Эта статья о том, как передать состояние от Link компонентам, действительно помогла объяснить, как использовать состояние Link.

В основном Link может передавать свойство состояния для визуализированного компонента.

<Link to={{ pathname: "/courses", state: { fromDashboard: true } }} />

Визуализированный компонент затем получает доступ к состоянию через props.location.state

Это в сочетании с передачей props компонентам, генерирующим ссылки, решило мою проблему! (^ __ ^)

Answer 3

В React Router вы можете использовать метод goBack (), если вам нужно отреагировать на предыдущий путь в вашей истории. Кроме того, существует возможность sh указать ваш путь к состоянию истории, но это необходимо только в том случае, если вам нужно знать URL-адрес предыдущего местоположения.

Подробнее об этой функции можно прочитать здесь: https://reacttraining.com/react-router/web/api/history