React/ContextAPI - 404 NotFound nu se randeaza

Limbaje de Programare Frontend
1

Salutare. Am o mica problemuta careia nu ii pot da de cap.

Am o mica aplicatie in react iar app.js-ul este inclus in 2 contextAPI. Unul global ce stabileste autentificarea iar celalalt sa sharuiasca niste date intre componente.

Problema pe care o am este ca atunci cand userul se duce pe o ruta inexistenta, ex: www.baseUrl.com/nu-exista nu se randeaza componenta 404 - NotFound(e blank). Daca includ componenta NotFound in Context-ul de sharuit date, atunci NotFound imi apare pe prima pagina.

Am reprodus cele de mai sus aici:

Orice sfat/idee ar fi apreciata.

Multumesc!

2

Salut,

In primul rand incearca sa ti reorganizezi un pic mai structura fisierelor, te ajuta sa tii totul mai curat. Ai putea sa-ti organizezi totul pe module (depinde si cat de mare e aplicatia).

e.g

modules/Products/index.jsx care sa-ti exporte tot, iar contextul a fi folosit aici, nu in partea de router. Sunt cateva tipuri de providers care ar avea sens acolo (e.g cel de Auth) , dar si cele la nivel de app trebuie sa fie in afara componentelor de routare. O varianta ar fi ceva de genul, unde nu ai nimic custom intre Router, Switch si Route. Providerul de Auth ar avea sens sa fie imediat dupa app-body, astfel incat poti customiza inclusiv headerul daca userul e sau nu autentificat etc.

  return (
    <div className="main-container">
      <div className="app-body">
        <Header />
        <Router>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <PrivateRoute path="/must-be-authenticated-1">
              <PrivateComponent1 />
            </PrivateRoute>
            <PrivateRoute path="/must-be-authenticated-2">
              <PrivateComponent2 />
            </PrivateRoute>

            <PrivateRoute path="/must-be-authenticated-3">
              <PrivateComponent3 />
            </PrivateRoute>

            <NotAuthRoute path="/must-not-be-authenticated">
              <NotAuthComponent1 />
            </NotAuthRoute>

            <Route exact path="/faq">
              <FAQ />
            </Route>

            <Route component={NotFound} />
          </Switch>
        </Router>
      </div>
    </div>
  );
3

Am sters tot ce tine de context din switch si se pare ca merge. In switch trebuie sa dai doar Route sau Redirect.

In documentatia react-router scrie ca

All children of a Switch should be Route or Redirect elements.

Foloseste context provider-ul pentru user inainte de Switch, ar trebui sa fie ok asa, celalalt provider inauntrul Route-ului.

1 Like
4

Multumesc de interes si timpul acordat, guys. Observasem ca problema este la context insa fraza “All children of a Switch should be Route or Redirect elements.” m-a ajutat mult.
Solutia pe care am gasit-o este sa scot cele doua contexturi in afara Switch-ului insa obligatoriu si Header-ul.
Mai multe info aici:

iar demo aici:

Problema pe care o mai am acum este ca ProductsContextProvider inglobeaza toata aplicata, iar eu as vrea doar la cateva componente specifice. (Nu vreau ca toata aplicatia sa faca re-render cand acel context isi schimba state-ul), Dar asta e o alta problema.
Cheers!

1 Like
5

daca era in Angular stiam sa o organizez pe module :smiley:
ps: am gasit in mare solutia, am lasat un comment mai jos.