react redux：私有路由不渲染布局

Question

代码沙箱link：

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

我为此准备了一个 PrivateRoute 组件。问题是成功登录后，URL 正在更新，但组件未呈现。

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

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

Answer 1

因为在您的代码中您创建了自己的 history 对象（它发生在您的 history.js 文件中，当您调用 createBrowserHistory() 时）但不会将它传递给您的 Router，没有任何反应。

有 2 种可能的解决方案：

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

Working Demo

使用这种方法，您应该从 login.actions.js（导入 history）中删除 history.push，并在 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));
   ...
}

useHistory 公开了 BrowserRouter 的 history 对象（我认为这暗示在 this official blog post 中）。

2。自己创建一个 history 对象，但将其传递给 Router 组件

Working Demo

此方法需要您进行多项更改：

自己创建 history 对象意味着您有责任将它提供给路由器组件，但它不能是 BrowserRouter，而是基础 Router 组件（参见这些 Github 答案：1, 2）。
一旦你导入了Router（而不是BrowserRouter），你需要去掉所有的useLocation和useHistory导入，否则你会出错。
我还不得不统一history对象的导出和导入，这样导出为默认导出（即export default history），导入为默认导入（即 import history from "./history"; 而不是 import { history } from "./history"）

（P.S：可以在 SO 的其他地方看到这种方法，例如 here or （后者明确安装 history，但在您的情况下不需要）。

react redux：私有路由不渲染布局

react redux: private route not rendering layout

reactjs

redux

react-router-v4