oedotme / render Goto Github PK

Love this library, great work! One thing though that I am not sure how to do is add a slug path to the PRIVATE paths array.

Example say location.pathName = '/order/1043', currently the PRIVATE paths matches on exact ones. Would be cool to specify:

// Slug path
const PRIVATE = ['/logout', '/order/:orderId']

// Wildcard path
const PRIVATE = ['/logout', '/order/*']

Here is the modified guard.tsx, this might be a great example to add the the project?

import { Navigate, useLocation } from 'react-router-dom'

import { useAuth } from '@/context'

const PRIVATE = ['/logout', '/order/:orderId']
// or this
// const PRIVATE = ['/logout', '/order/*']
const PUBLIC = ['/login']

const findMatchingPath = (currentPath: string, pathPatterns: string[]) => {
  const currentPathParts = currentPath.split('/')

  for (const pattern of pathPatterns) {
    const patternParts = pattern.split('/')

    if (currentPathParts.length !== patternParts.length && !pattern.endsWith('*')) {
      continue
    }

    let isMatch = true
    for (let i = 0; i < patternParts.length; i++) {
      if (patternParts[i] === '*' || patternParts[i].startsWith(':')) {
        continue
      }
      if (currentPathParts[i] !== patternParts[i]) {
        isMatch = false
        break
      }
    }

    if (isMatch) {
      return pattern
    }
  }

  return null
}

export const Guard = ({ children }: { children: JSX.Element }) => {
  const auth = useAuth()
  const location = useLocation()

  const authedOnPublicPath = auth.token && findMatchingPath(location.pathname, PUBLIC)
  const unAuthedOnPrivatePath = !auth.token && findMatchingPath(location.pathname, PRIVATE)

  if (authedOnPublicPath) return <Navigate to="/" replace />
  if (unAuthedOnPrivatePath) return <Navigate to="/login" replace />

  return <>{children}</>
}

Why You still recommended NextJs after you can create something like it? Or why you not create for example: refine.dev?

But, Many applications no need SSR.. no need SEO.. Many application want stay work at offline network.. and SSR Next cannot do that.. Client side react can do.. and simple deployment

Nice to see your library.. good job..

OS: Windows

pnpm start

ERR_PNPM_NO_SCRIPT_OR_SERVER  Missing script start or file server.js

I think, based on current package.json script definitions, the pnpm start command listed in README.md should be changed to pnpm preview.

Dear @oedotme,

really appreciate your works, whether it is possible to add vitest (MSW) and cypress to this template? it'd be helpful to replace CRA template with this.

thanks

Hi, thanks for your work! I think it'll nice for supporting nested layout

Expected

similar behaviour with basic example react-location

- Posts (has a list of posts with outlet)
|-- PostIndex
|-- DetailPost :id

when navigating from index to detail post, only re-render the outlet

Hi @oedotme really appreciate your work. It's so clean and useful.

Just one request. Since some apisare charged on React Router 6 compare to version that you used in your tutorial, I think it's so useful if you can update this repo and your tutorial to the latest vversion of React Router.

Again thanks for your work.

I love the approach you've implemented with Generouted. I'm pretty new to React, as a Vue comer.