0

index.js do projeto:

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route
} from "react-router-dom";

import App from './components/app';
import Navbar from './components/navbar';
import Footer from './components/footer';
import Projects from './components/projects';
import About from './components/about';
import WhatsappIcon from './components/whatsapp';

function Component(child){
  return (
    <>
      <WhatsappIcon />
      <header>
        <Navbar/>
      </header>
      {child}
      <footer>
        <Footer/>
      </footer>
    </>
  );
}

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path='/' element={ Component(<App />) } />
      <Route path='projetos' element={ Component(<Projects />) } />
      <Route path='sobre' element={ Component(<About />) } />
    </>
  )
);

const root = ReactDOM.createRoot(document.getElementById('root'));
document.title = 'Sun Light';

root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

e as tags de redirecionamento em outras partes do código são assim:

<a href="/sobre">
<GrMail className="icon"/>
</a>


<a href="/sobre">
<AiFillPhone className="icon"/>
</a>


<Link to="sobre#form">Clique aqui</Link>

Alguns eu uso a tag a padrão do HTML e outras eu uso o componente Link do react-router-dom, mas as duas opções não funcionam igualmente. Esse teste que eu to fazendo é em uma hospedagem gratuita no site https://br.000webhost.com , eu uso só pra ver o funcionamento online antes de subir pra uma hospedagem mais completa. Será que dependendo da plataforma eu preciso fazer alguma mudança nos direcionamentos ?

EDIT 1: eu tentei recriar o router de um jeito mais parecido com a documentação que apontaram nos comentarios, mas ainda sim funciona somente na base local. Em produção n funciona nenhuma rota alem da raiz

const router = createBrowserRouter([
  {
    path:"/",
    element: <App/>,
    children: [
      {
        path:"/",
        element: <Home />
      },
      {
        path:"sobre",
        element: <About />
      },
      {
        path:"projetos",
        element: <Projects />
      },
    ]
  }
]
);

const root = ReactDOM.createRoot(document.getElementById('root'));
document.title = 'Sun Light';

root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

(ainda acho que seja possível que por ser uma hospedagem gratuita ela seja limitada nessa questão de rotas)

6
  • Onde foi que as rotas funcionaram? Commented 16/02/2023 às 20:24
  • 1
    se as rotas não tão funcionando no ambiente local também... tenta seguir a documentação aqui reactrouter.com/en/main/utils/create-routes-from-elements, lá é usado um <Route> e não um Fragment (<></>) dentro do createRoutesFromElements. Você está usando CRA ou algo do tipo? Commented 16/02/2023 às 21:53
  • @CésarRodriguez só a raiz(/) Commented 17/02/2023 às 16:52
  • @EduardoSantos em ambiente local funciona normalmente. Eu não sei o que é CRA Commented 17/02/2023 às 17:06
  • Coloca um link para o repositório, pra ver se alguém descobre. Commented 17/02/2023 às 18:26

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .