CSUI routing

[detronetdip]

I'm trying to build a chrome extension with plasmo, I' using the cs ui for my extension, now my extension will have multiple pages like initially there will be welcome page then clicking on a button will lead to a diffrent page like that. but I don't know how to do this kind of routing efficiently in CSUI currently i'm using the below approch, which will get out of hand if I add more and more pages, and it is very dificult for complex routing as well. Can someone please help me with any suggesition or something?

const App=()=>{
   const [page,setPage]=useState(1);
   return (
     <>
        {
           page===1?<Page1 setPage={setPage}/> :
           page===2?<Page2 setPage={setPage}/> : <NotFound/>
       }
    </>
  )

}

[peguimasid]

You can use the MemoryRouter feature from react-router-dom to handle routing efficiently in your CSUI.

Here's an example of how you can set it up:

import { MemoryRouter, Route, Routes } from 'react-router-dom'

import { Main } from '@/pages/main'
import { Protocols } from '@/pages/protocols'

export const Router = () => {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/protocols" element={<Protocols />} />
      </Routes>
    </MemoryRouter>
  )
}

I used this repository as an example: https://github.com/Repyah84/wisher

[detronetdip]

Thanks for the reply, I will try and let you know about this

[peguimasid]

Hi @detronetdip,

I'm glad you found my suggestion helpful! If it worked well for your project, could you please mark my response as the correct answer? This would help other users who might be facing similar issues.

Thanks!

[detronetdip]

@peguimasid sure