如何忽略重定向，不在未经授权的路线上刷新应用程序

Question

我正在构建一个电子商务web应用程序，如果用户没有登录，但键入了私有url，如/profile-我想保持页面不变，但打开一个模态。问题是：history.goBack()和window.history.back()会刷新我的整个应用程序并重置我的状态。在刷新之前，我的模态只打开了一瞬间。我该怎么做才能忽略重定向而不刷新应用程序？非常感谢。

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);

App.js:

import React, { useState } from 'react';
import Navigation from './components/Navigation/Navigation';
import Main from './components/Main/Main';
import { SuccessModal, ErrorModal } from './components/Modal/Modal';
import {
ScrollTargetContext,
CartContext,
ModalContext,
Tokens,
} from './contexts';
const App = () => {
const [tokens, setTokens] = useState(null);
const [successModalOpen, setSuccessModalOpen] = useState(false);
const [successModalMessage, setSuccessModalMessage] = useState('');
const closeSuccessModal = () => setSuccessModalOpen(false);
const [errorModalOpen, setErrorModalOpen] = useState(false);
const [errorModalMessage, setErrorModalMessage] = useState('');
const closeErrorModal = () => setErrorModalOpen(false);
return (
<Tokens.Provider value={{ tokens, setTokens }}>
<SuccessModal
isOpen={successModalOpen}
onClose={closeSuccessModal}
message={successModalMessage}
/>
<ErrorModal
isOpen={errorModalOpen}
onClose={closeErrorModal}
message={errorModalMessage}
/>
<ModalContext.Provider
value={{
setSuccessModalOpen,
setSuccessModalMessage,
setErrorModalOpen,
setErrorModalMessage,
}}
>
<Main />
</ModalContext.Provider>
</Tokens.Provider>
);
};
export default App;

Main.js:

import React, { useContext } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { Tokens, ModalContext } from '../../contexts';
import Home from '../../pages/Home';
import Contacts from '../../pages/Contacts';
import About from '../../pages/About';
import Profile from '../../pages/Profile';
function PrivateRoute({ component, children, ...rest }) {
const { tokens } = useContext(Tokens);
const { setErrorModalOpen, setErrorModalMessage } = useContext(ModalContext);
return (
<Route
{...rest}
render={({ history }) => {
if (tokens) {
return component || children;
}
history.goBack();
setErrorModalMessage('You need to log innto view that page.');
setErrorModalOpen(true);
return null;
}}
/>
);
}
export default function Main() {
return (
<Switch>
<Route exact path="/">
<Redirect to="/home" />
</Route>
<Route exact path="/home" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/contact" component={Contacts} />
<PrivateRoute exact path="/profile" component={Profile} />
</Switch>
);
}

Answer 1

您可以删除history.goBack()，而不是空返回<Redirect to="/" />

更新

export default function Main() {
const { tokens } = useContext(Tokens);
return (
<Switch>
<Route exact path="/">
<Redirect to="/home" />
</Route>
<Route exact path="/home" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/contact" component={Contacts} />
{ token && (
<Route exact path="/profile" component={Profile} />
) }        
</Switch>
);
}

Answer 2

好吧，我想如果你手动键入页面，那么浏览器就会刷新，所以不会刷新以前的页面。唯一的方法是指定auth-error-page重定向，或者重定向到/，例如，并调用error/login模态。