Question

如何渲染基于 auth props 的组件？例如，我有一个 routes.js 文件，其中包含我的所有路由，包括私有路由和公共路由。

我想要一个包含所有路由的路由文件，无论它是私有组件还是公共组件，因为 home.js 稍后会检查这些。

以下是我的包含路由的路由文件：

import { Login, Register } from 'pages/form/components/';
import SecuredRoute from 'components/SecuredRoute';

const routes = [
  {
    path: '/',
    authenticate: false,
    component: Login
  },
  {
    path: '/signup',
    authenticate: false,
    component: Register
  },
  {
    path: '/secured1',
    authenticate: true,
    component: SecuredRoute
  },
  {
    path: '/secured2',
    authenticate: true,
    component: SecuredRoute
  }
];

export default routes;

以下是我在 Home.js 文件中呈现组件的片段。

<Switch>
{routes.map((route, index) => {
  return (
    <PrivateRoute
      exact
      authenticated={route.authenticate}
      path={route.path}
      component={route.component}
      key={index}
    />
  );
})}
</Switch>

目前我只能渲染私有组件，不能渲染公共路由问题：

如何在地图功能中检查路线是公共路线还是私人路线？正如您在代码段中所见，它仅呈现私有组件，而不呈现公共组件。

Answer 1

您可以检查私有路由中的条件，如果它们不满足条件，您可以使用 useHistory 钩子将它们发送到 404 或其他路由。

为此，您需要创建一个围绕您的应用程序的上下文，并帮助您使用应用程序周围的数据。您可以使用本机反应功能，但您也可以使用 redux，这是我的首选，您可以使用 redux 进行状态管理。

页面中的代码如下：

const history = useHistory();
if ({condistion}) {
    history.push({valid_route});
}

带有私有和公共路由的 React Router 中的条件渲染

1 个答案: