javascript - React Router - Go back to the last page visited, and not the default component - Stack Overflow

admin管理员组

文章数量:1350631

I am having a bit of an issue with React Router that I can not seem to figure out. It does not go back to the very last page visited, rather the first page it loaded. Here is an example.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import PrivateRoute from './utils/auth/PrivateRoute';
    <Router>
      <PrivateRoute exact path="/dashboard" ponent={DashboardView} />
      <PrivateRoute exact path="/games" ponent={Games} />
      <PrivateRoute
        exact
        path="/viewgame/:id*/"
        ponent={SingleGameView}
      />
    </Router>

When you go to /dashboard, you can click to view a games list that takes you to /games. You can then click on a game to see a single view of it, which takes you to /viewgame/:id*

Like so: /dashboard -> /games -> /viewgame/:id*

When you click on a game and are taken to /viewgame/, and then decide to click back in the browser, it takes me back to /dashboard instead of taking me back to /games. It is skipping over the last visited page, and taking me back to the first loaded page. I can send someone back to a route by setting up my own 'click to go back' button, but I need the browsers actual back and forward button to do this.

PrivateRoute is a HOC I setup to check to make sure the user accessing the route is authenticated or not. Otherwise they are booted. In case that could be the issue here is that ponent:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

//Utils - Auth
import { userAuth } from '../../../authentication/authentication';
const { isAuthenticated } = userAuth;

//Checks if a user isAuthenticated. If so, it renders the passed in secure ponent. If not, it renders a redirect to /signin
const PrivateRoute = ({ ponent: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: '/signin',
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

Here’s a snapshot of the PrivateRoute props when it’s rendered a ponent:

I am having a bit of an issue with React Router that I can not seem to figure out. It does not go back to the very last page visited, rather the first page it loaded. Here is an example.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import PrivateRoute from './utils/auth/PrivateRoute';
    <Router>
      <PrivateRoute exact path="/dashboard" ponent={DashboardView} />
      <PrivateRoute exact path="/games" ponent={Games} />
      <PrivateRoute
        exact
        path="/viewgame/:id*/"
        ponent={SingleGameView}
      />
    </Router>

When you go to /dashboard, you can click to view a games list that takes you to /games. You can then click on a game to see a single view of it, which takes you to /viewgame/:id*

Like so: /dashboard -> /games -> /viewgame/:id*

When you click on a game and are taken to /viewgame/, and then decide to click back in the browser, it takes me back to /dashboard instead of taking me back to /games. It is skipping over the last visited page, and taking me back to the first loaded page. I can send someone back to a route by setting up my own 'click to go back' button, but I need the browsers actual back and forward button to do this.

PrivateRoute is a HOC I setup to check to make sure the user accessing the route is authenticated or not. Otherwise they are booted. In case that could be the issue here is that ponent:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

//Utils - Auth
import { userAuth } from '../../../authentication/authentication';
const { isAuthenticated } = userAuth;

//Checks if a user isAuthenticated. If so, it renders the passed in secure ponent. If not, it renders a redirect to /signin
const PrivateRoute = ({ ponent: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: '/signin',
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

Here’s a snapshot of the PrivateRoute props when it’s rendered a ponent:

• javascript
• reactjs
• react-router-v4
• react-router-dom

Share Improve this question Follow edited Nov 22, 2019 at 15:52 maison.m asked Oct 29, 2019 at 18:07 maison.mmaison.m 86344 gold badges2121 silver badges4040 bronze badges 5

• If you are using props.history.replace() when navigating from /games to /viewgame/id*, it would replace that history entry causing the browser to go back to the dashboard. If that is what is happening in your code, you should use props.history.push() instead. – seanulus Commented Oct 29, 2019 at 18:22
• Using the react extension in your browser, what do the props look like on each of your <PrivateRoute> ponents at each stage? Do they have the route props? – technicallynick Commented Oct 29, 2019 at 18:43
• @technicallynick hey thanks for the ment and excuse the late reply. The props in the PrivateRoute ponents show the location object and also the path, but I do not see any previous route props or anything related. – maison.m Commented Nov 22, 2019 at 15:32
• How are your links setup in the DashboardView and Games ponents? Are you using react-router <Link /> or history.push()? – SharpSeeEr Commented Nov 22, 2019 at 16:09
• A repro on codesandbox or the like might be required. I don't see anything in your code that immediately points to the culprit. – technicallynick Commented Nov 25, 2019 at 18:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can achieve this by calling goBack() function in history object inside withRouter().

import React from 'react';
import { withRouter } from 'react-router-dom'

export default withRouter(({ history }) => {
  return (
    <div>
      <button onClick={() => history.goBack()}>BACK</button>
    </div>
  )
});

You can simply use the useHistory hook from react-router-dom

import { useHistory } from "react-router-dom";

const history = useHistory();

...

<div onClick={ ()=>history.goBack() }>Back </div>

Remove 'exact' from your routes props.

本文标签：