Entrar Ainda não tem acesso?
1
resposta

Problema com context + react-router-dom

por Erica Cavalher
| 277.8k xp | 37 posts
Analista de dados

Estou tentando usar um context em uma tela especifica em que utilizo o react-router dom e meu navegador está estourando um monte de erro e minha tela fica em branco sempre que eu coloco o context em volta da rota Como posso fazer para usar o context? Como faço para envolver um context na chamada do app.tsx?

app.tsx

function App() {
  return (
    <BrowserRouter>
      <AuthContextProvider>
        <Routes>
          <Route path="/auth/sign-in" element={<LoginPage />} />
          <Route path="/auth/sign-up" element={<RegisterPage />} />
          <Route path="/" element={<LoginPage />} />
          <ProjectsContextProvider>
            <Route path="/projects" element={<ProjectPage />} />
          </ProjectsContextProvider>
        </Routes>
      </AuthContextProvider>
    </BrowserRouter>
  );
}

Erros abaixo 

router.ts:5 Uncaught Error: [ProjectsContextProvider] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
react-dom.development.js:20085 The above error occurred in the <Routes> component:
Consider adding an error boundary to your tree to customize error handling behavior.
router.ts:5 Uncaught Error: [ProjectsContextProvider] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
1 resposta
por Neilton Seguins
| 327.2k xp | 467 posts
Instrutor Instrutor e desenvolvedor de software

Oi, Erica. Tudo bom?

A mensagem de erro nos informa que All component children of <Routes> must be a <Route> or <React.Fragment, ou seja, os componentes filhos de <Route> devem ser um <Route> ou um <React.Fragment>.

Uma sugestão é mover o AuthContextProvider de lugar, dessa maneira:

<AuthContextProvider>
    <BrowserRouter>
        <Routes>
            <Route path="/auth/sign-in" element={<LoginPage />} />
            <Route path="/auth/sign-up" element={<RegisterPage />} />
            <Route path="/" element={<LoginPage />} />
            <ProjectsContextProvider>
            <Route path="/projects" element={<ProjectPage />} />
            </ProjectsContextProvider>
        </Routes>
    </BrowserRouter>
</AuthContextProvider>

e também, você precisa migrar o ProjectsContextProvider para dentro de ProjectPage ou então tentar fazer dessa forma:

<Route path='/projects'>
  <ProjectsContextProvider>
    <ProjectPage />
  </ProjectsContextProvider>
</Route>

Deve funcionar.

Qualquer outras dúvidas fique a vontade para responder este tópico ou criar um novo! Além disso, temos a comunidade no Discord que é muito ativa e que está sempre pronta a ajudar!

Abraços!