pass props with Lazy loading in react-router-dom v6

Question

I need to pass props to the lazy components.

const A = React.lazy(() => import("./A"));

function App() {
return (
      <Suspense fallback={<GlobalLoader />}>
        <Routes>
          <Route path="/s/:name" element={<ValidateName />} />
          <Route path="/s" element={<Page fullsize={true}><A name='default'/></Page>} />
          <Route path="*" element={<Navigate replace to='/s' />} />
        </Routes>
      </Suspense>
)
}
const Validatename = () => {
    const {name} = useParams();
    let allowedValues =[{'name':a, ... },{'name':b, ... },{'name':c, ... }]
    let validValue = allowedValues.filter((i)=>i.name === name);
    let isValid = (validValue > 0);

    if(!isValid) return <Navigate replace to =='/s'>
    return <Page fullSize={true}><A name={name}/></Page>
}

Edit:

Desired outcome: Lazy Loading for Component A.
Component A is initialised with either 'default' value or value passed in URL i.e. 'name'
Which value to pass is decided by ValidateName Component and default route /s.

Problem: How to pass prop 'name' in A so that it can be loaded lazily.

It's unclear what you are wanting or trying to do. Please edit your question to include a more representative code example. stackoverflow.com/help/minimal-reproducible-example — Drew Reese
– Drew Reese, Commented Feb 7, 2022 at 17:52
I skipped some part to ask 'to the point' question. Codes may make things more specific and sort of troubleshooting. Suggestion taken and hence edited the question for more clarity. Thanks. — u tyagi
– u tyagi, Commented Feb 9, 2022 at 8:34

eneski · Accepted Answer · 2022-02-06 18:38:59Z

1

It is not possible in this outer context

Instead, you can use useParams() to get the path in the lazy loaded component A

if you want you can create a wrapper around A and call useParams() here like following however basically it is the same thing.

const AWrapper= () => {
  const { path } = useParams();
  if(path.id){
      return <A prop={path.id} />
  } else{
      return <A props="default" />
  }
};

PS: you should change A to AWrapper in Route too

edited Feb 6, 2022 at 18:38

answered Feb 6, 2022 at 18:04

eneski

1,70522 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

u tyagi Over a year ago

I simplified the question, I need to pass certain props other than 'what I am getting thro useparams'. Like, IF userparams:id is valid then element <A/>, ELSE <A prop="default"/>

eneski Over a year ago

I see, however it is still not possible. You have to move that logic down a bit. Instead you can create a wrapper like I mentioned in the updated answer if it helps.

Collectives™ on Stack Overflow

pass props with Lazy loading in react-router-dom v6

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related