CODEWITHSUNDEEP
next.jsurl-routingreact-context
TrueWill
TrueWill

Reputation: 25543

Next.js advanced client-side routing

In a Next.js app (full-featured, not next export) that uses React Context for state management and the file-system based router, how can you implement advanced routing?

I want to have preconditions for certain pages, so for instance if you try to load /foo but the Context doesn't have a given property set correctly, it'll route you to /bar.

The actual logic is complex and varies by page, so I'm looking for an approach that's easy to maintain.

Note that these preconditions are not authorization-related, so they do not need to be enforced server-side. It's more like "you need to fill out this form before you can go here."

The use of Context imposes some constraints:

Update: It's also good to avoid a flash when the page loads before rerouting happens, so a side goal is to return a loading indicator component in that case.

Upvotes: 1

Views: 2153

Answers (2)

user16435030
user16435030

Reputation:

You can do this.

const Component = () => {
  const example = useExample()

  return <div id='routes'>
    <a href='/example1'>Example 1</a>
    {example.whatever && <a href='/example2'>Example 1</a>}
  </div>
}

Upvotes: 0

Borris Wiria
Borris Wiria

Reputation: 476

I believe you can create a HOC and wrapped every pages with you HOC that takes arguments e.g. { redirects: '/foo' }

// pages/bar.tsx
const Page = () => {...}

export default RouteHOC({ redirects: '/foo' })(Page)

the HOC file will be something like this

// hoc/RouteHOC.tsx
const RouteHOC = ({ redirects }) => (WrappedComponent) => {
  
  // you can do your logic here with the context.. even filling up a form here 
  // too also can.. (like returning a modal first before the real Component). 
  // useEffect work here too..
  
  const { replace } = useRouter()
  
  // then after you want to replace the url with other page
  replace(redirects)
  
  return WrappedComponent
}

This is pretty okay to be maintainable I think. You just create all the logic in HOC and when you want to update the logic - you just have to edit it in 1 file.

Well this is one option I can think of when reading your question - sorry if I misunderstood it in any way. There will always be a better way out there as we all know we can improve and adapt to new situation every seconds :D. Cheers 🥂!!

Upvotes: 2

Related Questions