У меня возникла небольшая проблема с React Router, которую я не могу понять. Он не возвращается к самой последней посещенной странице, а к первой загруженной странице. Вот пример.
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" component={DashboardView} />
<PrivateRoute exact path="/games" component={Games} />
<PrivateRoute
exact
path="/viewgame/:id*/"
component={SingleGameView}
/>
</Router>
Когда вы перейдете к /dashboard
, вы можете щелкнуть, чтобы просмотреть список игр, который приведет вас к /games
. Затем вы можете щелкнуть игру, чтобы увидеть ее в одном представлении, которое приведет вас к /viewgame/:id*
.
Вот так: /dashboard -> /games -> /viewgame/:id*
Когда вы нажимаете на игру и попадаете в /viewgame/
, а затем решаете вернуться в браузере, я возвращаюсь в /dashboard
, а не в /games. Он пропускает последнюю посещенную страницу и возвращает меня на первую загруженную страницу. Я могу отправить кого-то обратно на маршрут, настроив свою собственную кнопку «нажмите, чтобы вернуться», но для этого мне нужны фактические кнопки браузера «назад» и «вперед».
PrivateRoute
— это настройка HOC I, чтобы убедиться, что пользователь, обращающийся к маршруту, аутентифицирован или нет. В противном случае они загружаются. В случае, если это может быть проблемой, вот этот компонент:
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 component. If not, it renders a redirect to /signin
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
isAuthenticated() ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: '/signin',
state: { from: props.location }
}}
/>
)
}
/>
);
export default PrivateRoute;
Вот снимок реквизита PrivateRoute, когда он визуализирует компонент:
3 ответа
Вы можете добиться этого, вызвав функцию goBack()
в объекте history
внутри withRouter()
.
import React from 'react';
import { withRouter } from 'react-router-dom'
export default withRouter(({ history }) => {
return (
<div>
<button onClick={() => history.goBack()}>BACK</button>
</div>
)
});
history.goBack()
возвращает вас на последнюю посещенную страницу. Подробнее об API истории здесь. Не знаю, этого ли хотел @maison.m, но думаю, что это могло бы ему помочь в любом случае.
Вы можете просто использовать хук useHistory
из react-router-dom
import { useHistory } from "react-router-dom";
const history = useHistory();
...
<div onClick={ ()=>history.goBack() }>Back </div>
Удалите «точный» из ваших реквизитов маршрутов.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.
props.history.replace()
при переходе от/games
к/viewgame/id*
, это заменит эту запись в истории, заставив браузер вернуться к панели управления. Если это то, что происходит в вашем коде, вы должны вместо этого использоватьprops.history.push()
.<PrivateRoute>
на каждом этапе? У них есть реквизиты маршрута?<Link />
илиhistory.push()
?