如何使用 React Router 创建公共和私有路由

使用React Router在 React 应用中编写公共和私有路由的步骤

在开发带有身份验证的 React 应用程序时，我们可能需要公共路由和私有路由。我们先来看看它们是什么？

公共路线

公共路由包括登录、注册、忘记密码、重置密码。简单来说，这些路由在登录App之前就可以访问。

私人路线根据应用程序而有所不同，例如仪表板、用户配置文件、应用程序设置、主页等。简单来说，只有登录后才能访问这些路线。

公共路由和私有路由的限制是，登录后不能访问公共路由，登录前不能访问私有路由。

在本文中，我们将了解如何使用 React-Router 为你的 React 应用创建公共和私有路由。让我们开始吧

首先，让我们创建一个PublicRoute.js组件来处理公共路线条件，如下所示

	import {
	Route,
	Redirect
	} from 'react-router-dom';

	function PublicRoute({ children, isAuthenticated, ...rest }) {
	return (
	<Route
	{...rest}
	render={
	({ location }) => (
	!isAuthenticated ? (
	children
	) : (
	<Redirect
	to={{
	pathname: '/home',
	state: { from: location }
	}}
	/>
	))
	}
	/>
	);
	}

	export default PublicRoute;

正如您在上面的代码中看到的，公共路由组件接收 3 个 props，如children、isAuthenticated和 …rest 。

如果用户通过身份验证，他将被重定向到主屏幕，并且只有未通过身份验证（登录）时才可以访问公共路线。

私有路由组件与公共路由类似，唯一不同之处在于重定向URL和认证条件。

如果用户未通过身份验证，他将被重定向到登录页面，并且用户只有通过身份验证（登录）才能访问经过身份验证的路线。

受保护的 Route 组件用于映射所有经过身份验证的路由，如下所示

经过身份验证的路由在 routes.js 中定义如下

现在让我们将路由组件集成到 App.js，如下所示

这里我们用组件包装了未经验证的路由，用组件<PublicRoute />包装了经过验证的路由。<PrivateRoute />

我们已经使用 Suspense 为组件添加了延迟加载。
现在我们已经配置了私有路由和公共路由。如果没有匹配，<NoFoundComponent />则会进行渲染。

公共和私有路由还会限制在注销后使用浏览器的后退按钮访问之前访问过的路由。希望以上信息对您有所帮助。感谢您的阅读。

在Twitter上获取更多更新。