如何在反应路由器中重置位置状态

Question

我正在按照反应路由器文档创建一个受保护的路由 HOC 对于未经身份验证的请求，我将用户重定向如下：

<Redirect to={{
pathname: '/input-number',
state: { from: props.location },
}} />

现在在重定向的组件上，我使用以下逻辑显示错误消息：

this.props.location.state && this.props.location.state.from &&
(
<Grid.Row>
<Grid.Column>
<Message negative>
<Message.Header>You must be logged in to visit the page</Message.Header>
</Message>
</Grid.Column>
</Grid.Row>
)

问题是当用户重新加载时，与该位置关联的页面不会清除，并且在用户重定向到登录组件后，每次刷新时都会显示错误消息。我正在寻找一种清除状态的方法。我认为这必须在不设置某些应用程序状态的情况下实现。

更新：为了清楚起见，我正在添加完整的私人路线：

'

export default function PrivateRoute({ component: Component, ...rest }) {
const isAuthenticated = localStorage.getItem(ACCESS_TOKEN);
return (
<Route
{...rest}
render={props => (
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to={{
pathname: '/input-number',
state: { from: props.location },
}}
/>
)
)}
/>);
}

'

Answer 1

在 React 应用程序的初始设置期间为<Router>创建history对象时，您可以将历史记录位置上的状态替换为不包含from道具的状态。

const history = createHistory();
if (history.location && history.location.state && history.location.state.from) {
const state = { ...history.location.state };
delete state.from;
history.replace({ ...history.location, state });
}

Answer 2

此外，可以在不合并位置的情况下替换状态：

const { state } = this.props.location;
if (state && state.copySurveyId) {
this.duplicateSurvey(state.copySurveyId);
const stateCopy = { ...state };
delete stateCopy.copySurveyId;
this.props.history.replace({ state: stateCopy });
}

Answer 3

这可能不是最理想的方法，但就我而言，解决此问题的最简单方法是使用history.replace()并将当前 URL 替换为相同的 URL，但省略位置位置状态对象(也应该适用于参数)。但是，您必须小心，只有在使用位置状态对象或参数的值后才能替换URL。就我而言：

应用程序中的 Somwhere：

history.push("to/app/route", {
contentOfLocationState: true
});

在映射到上述路由的组件中

function (){
try {
// Post to API
Post(...{ contentOfLocationState });
} catch (e) {
// error
} finally {
history.replace("to/app/route");
}

PS：使用@robert-farley描述的技术，反应路由器将开始为我显示白屏。不过我的设置可能有问题