Sometimes we need to hide pages/routes from the user and disabling their accessibility to those pages.
In this post I want to show you the easiest way(which I think it is) to do this.

1.I will start with create-react-app

// Create a new app
npx create-react-app route-app react-router-dom

// Run the created app
cd route-app
yarn start

// http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

2.In our main component(App.js) we will define our routes
(src/App.js)

import ProtectedRoute from './ProtectedRoute'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

export default App = () => {
   return(
      <BrowserRouter>
        <Switch>
          <Route exact path='/posts' component={Home} />
          <ProtectedRoute exact path='/login' component={Login} />
          <Route path='/' component={NotFound} /> 
          //this is 404 page btw - no "exact" prop
        </Switch>
      </BrowserRouter>
   )
}
Enter fullscreen mode Exit fullscreen mode

As you can see we will create our route with a custom route component, So let's build that.

3.Our ProtectedRoute component
(src/ProtectedRoute.js)

import React from 'react'
import { Redirect, Route } from 'react-router'

export const ProtectedRoute = ({ component: Component, ...rest}) => {
    const userIsLoggedIn = true //our user logged in

    return(
        <Route 
            {...rest}
            render={(props) => {
                if(!userIsLoggedIn){
                    return <Component {...props}/>
                } else {
                    return <Redirect to={{ pathname: '/', state: {from: props.location }}} />
                }
            }}
        />
    )
}
Enter fullscreen mode Exit fullscreen mode

If our user is not logged in then show the Component(which is loggin page in this case because we don't want logged in user see the login in page), If not Redirect the user to home page.

This is how we protect route with react-router-dom

In Next Js we use HOC(high-order-component)

1.Create next app

// Create a new app
npx create-next-app route-app

// Run the created app
cd route-app
yarn dev

// http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

2.First We create HOC
(src/HOC/ProtectedRoute)

import { useRouter } from "next/router"

const ProtectedRoute = (ProtectedComponent) => {

   return (props) => {

      if (typeof window !== "undefined") {
         const Router = useRouter()

         const userIsLoggedIn = true

         if (userIsLoggedIn) {
            Router.replace("/")
            return null
         } else {
            return <ProtectedComponent {...props} />
         }
      }

      return null
   }
}

export default ProtectedRoute
Enter fullscreen mode Exit fullscreen mode

In this case we say if the user is logged in then redirect to home page else return the component

3.Make our page protected
(src/pages/login.js)

import ProtectedRoute from "../HOC/ProtectedRoute"

const Login= () => {
   return (
      <div>
          <a>Login Page</a>
      </div>
   )
}

export default ProtectedRoute(Login) //wrap our component in hoc
Enter fullscreen mode Exit fullscreen mode

That's all you need! Thank you

# reactnative # javascript
Logo
React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。 企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

avatar React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。 为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。 我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。 你可以在这里找到 repo u003d>githu

avatar React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子 有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。 反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

avatar React