React Router 5.1 - useLocation hook - determine past locations

问题

According to React Router 5.1 documentation it should be possible to see "where the app is now, where you want it to go, or even where it was". In my app I need to see "where it was" - what locations I have visited before landing at a specific location.

More precisely; I wish to find a prevoious location matching a certain pattern. That location might be two or three locations ago.

However - I cannot figure out how to perform this.

What is the best and recommended approach to achieve this?

Kind regards /K

回答1:

In React Router you can use the goBack() method if you need to react a previous path in your history. Also, there is a possibility to push your path to history state, but that’s only needed if you need to know the URL of the previous location.

You can read more about this functionality from here: https://reacttraining.com/react-router/web/api/history

回答2:

You can check this example. Hope it helps you.

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>
));

Another Example for going back -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>
));

回答3:

I turns out the best way, for me, to see where the application has been been is to simply use the state property in the React Router Link.

This article on how to pass state from Link to components really helped explain how to use the Link state.

Basically the Link can pass the state property to the rendered component.

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

The rendered component then access the state via props.location.state

This in conjunction with passing props to components generating the links solved my problem! (^__^)

来源：https://stackoverflow.com/questions/61643881/react-router-5-1-uselocation-hook-determine-past-locations