X1034 react router upgrade to 6.0

[seenanair]

react-router-dom updated from v5 to v6.15

Following are the main changes

• Prompt deprecated in v6 instead used a third-party library. react-router-prompt

• Major changes in route switching

  • Switch doesn't exist
  • Routes.tsx file removed and new file ‘RouteLayout.tsx’ added
  • Replaced with createBrowderRouter function
  • Route change in props
  • Custom Route components aren't valid in react-router-dom@6 like what was commonly used in v5, they are replaced
    with a wrapper component pattern which uses Outlet
      - Replaced AuthRoute with AuthLayout
     

• Redirect replaced with

•  NavLink property ‘exact renamed to ‘end’

•   useNavigate instead of useHistory

• history.push replaced by navigate
  -  Link props change 
  -  NavLink - activeClassName and activeStyle props removed from NavlinkProps. Instead a function required to return either style or className that will allow you to customize the inline styling or the class string based on component’s active state

• RouteComponentProps doesn't exist in v6

  • RouteComponentProps changed to useSearchParams instead of match
  • RouteComponentProps, StaticContext,LocationState replaced with useLocation i to access the redirected page state

•   navigate(0) to reset the current page

• Logout changed as a jsx element. All component children of Routes must be a Route or React.Fragment

• Use loader and useLoaderData instead of DataFetcher if need to access query params before loading page (e.g FileManager, LocationByBarcode)

Reference for Migration from v5 to v6
https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v51
 

[khelwood]

Looks very thorough. I have some questions just for understanding.

[khelwood]

Can you answer my questions from the last review please?

[seenanair]

Can you answer my questions from the last review please?

@khelwood I have answered and made changes as well yesterday. I can see my comments above. If you can't please let me know