What needs changed?
Currently SampleMetadataImportWizard is wrapped around each route in the sample metadata import. This causes the page header and the steps to be re-rendered each time the child component needs to be re-rendered. What needs to happen is that a layout component needs to be created to handle this and instead of wrapping each route, use react-router-dom's component Outlet. The router in src/main/webapp/resources/js/pages/projects/samples-metadata-import/index.js will need to be re-written to look something like this:
BrowserRouter
Routes
Route element=layout
Route element=SampleMetadataImportSelectFile
...
/Route
/Routes
/BrouserRouter
Additional information
A good example can be seen from the react-router-dom documentation: https://reactrouter.com/en/main/components/outlet and their example repo: https://github.com/remix-run/react-router/blob/dev/examples/basic/src/App.tsx
What needs changed?
Currently
SampleMetadataImportWizardis wrapped around each route in the sample metadata import. This causes the page header and the steps to be re-rendered each time the child component needs to be re-rendered. What needs to happen is that a layout component needs to be created to handle this and instead of wrapping each route, use react-router-dom's componentOutlet. The router insrc/main/webapp/resources/js/pages/projects/samples-metadata-import/index.jswill need to be re-written to look something like this:Additional information
A good example can be seen from the react-router-dom documentation: https://reactrouter.com/en/main/components/outlet and their example repo: https://github.com/remix-run/react-router/blob/dev/examples/basic/src/App.tsx