问题描述
and trying to follow this article
成功login(/auth/login)时，应将用户路由到dashboard(/admin/summary)。如果登录成功，我还将存储一个access token。
为此，我有一个PrivateRoute组件。问题在于，成功登录后，URL会更新，但组件不会呈现。
PS：关于仪表板，这是一个单页应用程序，因此，仪表板具有顶部栏，侧边栏，并且正确的内容以及所有这些内容都在<AdminLayout/>内部耦合。因此，在我的AppRouter中，我必须渲染<AdminLayout/>和任何一个组件。
解决方法
由于在代码中创建了自己的history对象（当您调用history.js时，它在您的createBrowserHistory()文件中），但是没有将其传递给{{1} }，什么也没发生。
有2种可能的解决方案：
1。不要自己创建Router对象，而要在组件内部使用history钩子
使用这种方法，您应该从useHistory中删除history.push（导入login.actions.js），并在history中使用history.push（使用{{1} }钩子）：
Login.js
useHistory // login.actions.js
...
loginService.login(userid,password,rememberPassword).then(
(userid) => {
dispatch(success(userid,rememberPassword));
// history.push(from); <-- commented out!
},(error) => { ... }
);
};
...
公开了// Login.js
function handleSubmit(e) {
...
const { from } = {
from: { pathname: "/admin/summary" }
};
history.push(from) // <-- added!
dispatch(loginActions.login(inputs,from));
...
}
的{{1}}对象（我认为这在this official blog post中是隐含的）。
2。自己创建一个useHistory对象，但将其传递给history组件
这种方法需要您进行一些更改：
-
自行创建
BrowserRouter对象意味着您有责任将其提供给路由器组件，但是它不能是history，而是基础Router组件（请参见以下Github答案：1，2）。 -
一旦导入
history（而不是BrowserRouter），就需要清除所有的Router和Router导入，否则会出错 -
我还必须统一
BrowserRouter对象的导出和导入，以便将其导出为默认导出（即useLocation），然后将其导入为默认导入（即useHistory代替history）
（PS：这种方法可以在SO的其他地方实现，例如here或here（后者明确安装了export default history，但在您的情况下不需要）。 / p>