反应redux：私有路由不渲染布局

Question

代码沙箱链接：

and trying to follow this article

成功login(/auth/login)时，应将用户路由到dashboard(/admin/summary)。如果登录成功，我还将存储一个access token。

为此，我有一个PrivateRoute组件。问题在于，成功登录后，URL会更新，但组件不会呈现。

PS：关于仪表板，这是一个单页应用程序，因此，仪表板具有顶部栏，侧边栏，并且正确的内容以及所有这些内容都在<AdminLayout/>内部耦合。因此，在我的AppRouter中，我必须渲染<AdminLayout/>和任何一个组件。

所有的react和redux代码都包含在代码沙箱中。

Answer 1

由于在代码中创建了自己的history对象（当您调用history.js时，它在您的createBrowserHistory()文件中），但是没有将其传递给{{1} }，什么也没发生。

有2种可能的解决方案：

1。不要自己创建Router对象，而要在组件内部使用history钩子

Working Demo

使用这种方法，您应该从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, password, 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组件

Working Demo

这种方法需要您进行一些更改：

1. 自行创建BrowserRouter对象意味着您有责任将其提供给路由器组件，但是它不能是history，而是基础Router组件（请参见以下Github答案：1，2）。

2. 一旦导入history（而不是BrowserRouter），就需要清除所有的Router和Router导入，否则会出错

3. 我还必须统一BrowserRouter对象的导出和导入，以便将其导出为默认导出（即useLocation），然后将其导入为默认导入（即useHistory代替history）

（PS：这种方法可以在SO的其他地方实现，例如here或here（后者明确安装了export default history，但在您的情况下不需要）。 / p>