0

Why does react router not open a tab in the page, that is, the pages open, but if you share a link and then follow it, the page will not be displayed. For example, https://amir248.github.io/site-amir/ opens, so there is no longer https://amir248.github.io/site-amir/location What could be wrong? I used react router 6, all pages are on github. https://github.com/amir248/site-amir

import { Link, Outlet } from "react-router-dom";
function titleRename(){  
document.querySelector('head > title').innerHTML=`Web developer Amir!!!`
document.querySelector('head > meta:nth-child(5)').setAttribute('content','HTML coder and react web developer!')
}
export default function Skills() {
return (
<>
<div onLoad={titleRename()}>
    <h1>My skills</h1>
    <p>Могу плюнуть жувачку и потом пнуть её, и запнуть в мусорку! O_o</p>
    <Link to={`/site-amir/`}>home</Link>
  </div>
  <Outlet/>
</>
);}

The issue is solved, but partially,using HashRouter. if you do not take into account that for the router to work on the github, it is necessary to wrap the script with the router in tags according to this instruction: React Router not working with Github Pages

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<HashRouter>
  <App />
</HashRouter>
</React.StrictMode>
);

It works, BUT THE # APPEARS: # <- not important, but I would like to find a more correct way, because it is not completely clear why the router works on github with # in the link. Without # in the link, the transition remains a 404 error

Thanks in advance for any help! Thank you. Have a successful day and a magical mood!

  • follow this instruction https://create-react-app.dev/docs/deployment/#github-pages "gh-page branch" cannot be put in the git hub, and creating a new branch using the git branch gh-pages branch command will not work "gh-page branch" ?? –  May 13 '23 at 03:26
  • github page added to json package "homepage" : "https://amir248.github.io/site-amir/", –  May 13 '23 at 03:30
  • Does this help answer your question? https://stackoverflow.com/a/71985764/8690857 – Drew Reese May 16 '23 at 06:31
  • Everything turned out to be clear if you set import { HashRouter } from 'react-router-dom'; and wrap it in Everything starts to work –  May 21 '23 at 11:09

0 Answers0