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)