How to access history stack in React router?

user_10351114 0
Viewed 3672

I am trying to access history stack of react-router.

Here is what I want to do:

I create a board using react.js and react-router.

If a user clicks one of the list on the board, it goes to the detail page.

Suppose the user clicks article that has id 3 on the list, react-router goes to detail page of id 3 article and the url form will be below.

localhost:3000/board/3

In the detail page, there is go to the list button and when user clicks it, page will be moved to the list page again and I will use history.back() here.

So far, it is easy to make it using react-router.

However there is another page that user can access detail page, let's say profile page.

If user access detail page through profile page, go to the list button should behave different. It pushes the user to user-list page.

To sum up, go to the list button works like this below:

board -> detail -> click go to the list -> board
profile -> detail -> click go to the list -> user-list

In order to push user to different page according to where the user was at, I need to see where the user has come from therefore I need to see history stack or is there other way I can check what url the user came from?

react-router reactjs
3 Answers

With react-router-dom you won't have direct access to the browser's history object (i.e. the history stack), but you don't necessarily need to since you could use route state to send "meta" data along with the route transition about where the user navigated from.

Link to: object

For an example route: <Route path="/detail">....</Route> you can have multiple links to the page, each providing unique state.

Example links:

<Link
  to={{
    pathname: '/details',
    state: {
      from: 'board',
    }
  }}
>
  to details from board
</Link>

or

<Link
  to={{
    pathname: '/details',
    state: {
      from: 'profile',
    }
  }}
>
  to details from profile
</Link>

or for imperative navigation

history.push({
  pathname: '/details',
  state: {
    from: 'profile',
  }
});

Route state is placed on the location object, access the route state in the Details component and issue the follow-on navigation accordingly.

const targets = {
  board: "/board",
  profile: "/userlist",
};

...

const { state: { from } } = useLocation();
const target = targets[from] ?? "/board";

...

<Link to={target}>
  click go to the list
</Link>

or for imperative navigation

history.push(target)
user_86908570

In our navigation, we pass the history (code block 1). In the function-based component, we will have the complete history stack (Code block 2). Please refer the URL for additional details.

URL: https://reactrouter.com/web/api/history

Code Block 1

<Navbar.Collapse id='basic-navbar-nav'>
    <Route render={({ history }) => <SearchBox history={history} />} />
    <Nav className='ml-auto'>
        <LinkContainer to='/cart'>
            <Nav.Link>
                <i className='fas fa-shopping-cart'></i> Cart
            </Nav.Link>
        </LinkContainer>
    </Nav>
</Navbar.Collapse>

Code Block 2

const SearchBox = ({ history }) => {
    const [keyword, setKeyword] = useState('')
  
    const submitHandler = (e) => {
      e.preventDefault()
      if (keyword.trim()) {
        history.push(`/search/${keyword}`)
      } else {
        history.push('/')
      }
    }
};

enter image description here

user_36561140

History / useHistory is no longer available in React router v6. You can use useNavigate and location state property to figure out from where to the current location is navigated from. Like explained in here.

Telling the next page where the user came from and branching the UI. The most popular implementation here is showing a record in a modal if the user clicked on an item in a grid view, but if they show up to the URL directly, show the record in its own layout (pinterest, old instagram).

You set location state in two ways: on Link component or navigate:

<Link to="/pins/123" state={{ fromDashboard: true }} />;

let navigate = useNavigate();
navigate("/users/123", { state: partialUser });

And on the next page you can access it with useLocation:

let location = useLocation();
location.state;

Browser back action can be performed with

let navigate = useNavigate();
...
navigate(-1)
user_84868540
Related