Soy nuevo en reactjs, quiero acceder a mi componente Bdc de dos maneras, primero cuando hago clic en un botón en otro componente y de la otra manera cuando accedo al componente usando su ruta directamente en la barra de búsqueda.

La primera forma es trabajar usando useLocation

 <Button variant="contained" onClick={() => navigate("/nouveauBdc", {state: {id: '', isNew: true}})}> NOUVEAU BON DE COMMANDE </Button>

En mi componente, puedo leer el estado enviado desde navigate("/nouveauBdc", {state: {id: '', isNew: true}})

pero de la segunda manera cuando pongo la ruta de mi componente en la barra de búsqueda http://localhost:3001/nouveauBdc me sale este error

TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'isNew')

Componente Bdc : aquí está la línea de donde obtuve el error:

 React.useEffect(() => { setBdcState(location.state as BdcProps); }, [location]) React.useEffect(() => { if(!bdcState.isNew){ //get data } }, [bdcState.isNew]) // the line error

en mis Rutas puse el Link para pasar el estado de aqui pero no funciona

 <BrowserRouter> <Routes> <Route path="/nouveauBdc" element={<ProtectedRoutes/>}> <Route path="/nouveauBdc" element={<Bdc />} /> </Route> <Route path="*" element={<h1>404 - Page non trouvée</h1>} /> <Route path="/accessDenied" element={<h1>403 - Accès interdit</h1>} /> </Routes> <Link to={'nouveauBdc'} state={{ state: {id: '', isNew: true} }} >Page 1</Link> </BrowserRouter>,

RutasProtegidas.tsx

 const user = () => { if(userAuth)){ return( <Outlet/> ); } else { return( <Navigate to="/accessDenied"/> ); } } return( <div> {user()} </div> );

Por favor, ¿hay alguna solución para enviar el estado también cuando se accede directamente al componente (barra de búsqueda)?