Please enable JavaScript.

Coggle requires JavaScript to display documents.

ROUTER-V6 - Coggle Diagram

- - - - createBrowserRouter([...])
  - - - <App />
- - - - <Outlet/>
  - - - [..]
      - {path: '', element: <Home/>}
      - {..}
        
        path: 'users'
        
        element: <UsersPage/>
        
        children
        
        [..]
        
        { path: ':id'
        
        element: <UserDetail/> }
- - - - Returns
      - ParamsObj
    - - {id: '1'}
  - - - .toString()
        
        name=Alice&age=25
      - .get('name')
        
        Alice
    - - = useSearchParams()
    - - Has
        
        SideEffect
      - Call-In
        
        EventHandler
        
        useEffect
  - - - pathname
        
        /users/1
      - search
        
        ?name=A&age=25
      - hash
      - state
      - key
- - - - isRouteErrorResponse(er)
      - Check
- - - - const navigate
      - = useNavigate()
    - - navigate("/")
      - Only-In
        
        useEffect
        
        EventHandler
- - - - navigateFunc
    - - OtherThan
      - useEffect
      - EventHandler
  - - - Routes
      - To-Enforce
        
        Business
        
        Layout
        
        Rules
    - - Create
      - src/routing/<>
      - Return
        
        If-NotUser
        
        <Navigate to="/login"/>
        
        Else
        
        <Outlet/>
    - - createBrowserRouer
        
        In-Root
      - Add
      - element:
        
        <PrivateRoutes/>
      - children:
        
        [..]
        
        To-Protect