4

After I deployed my react app on GitHub (using gh-pages), I ran into a navigation problem. The site takes the following URL as a home page: https://1kiritos1.github.io/,

Whereas, the homepage should be: https://1kiritos1.github.io/youtube-clone/

I need the site navigation to depend on the above-mentioned URL, for example: https://1kiritos1.github.io/youtube-clone/video/***
Or
https://1kiritos1.github.io/youtube-clone/channel/***

App

import React from 'react';
import { Box } from '@mui/material';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import { Navbar, Feed, VideoDetail, ChannelDetail, SearchFeed } from './components';

function App() {
    return (
        <Router>
            <Box>
                <Navbar />
                <Routes>
                    <Route exact path="/" element={<Feed />} />
                    <Route path="/video/:id" element={<VideoDetail />} />
                    <Route path="/channel/:id" element={<ChannelDetail />} />
                    <Route path="/search/:searchTerm" element={<SearchFeed />} />
                </Routes>
            </Box>
        </Router>
    )
}
export default App;

Index

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './style.css';

ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
)

Package.json:

"name": "youtube_clone",
  "homepage": "/youtube-clone/#",
  "private": true,
  "version": "0.0.0",
  "type": "module",

Vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: '/youtube-clone/', // Base url of the website
  plugins: [react()]
});

I've tried to use basename="youtube-clone/", and also make changes following these solutions, but none of that didn't help me. The site works correctly on local server. Maybe issue in vite config, I don't know. ( If you need any additional information, please tell me, thank you )

Roman S.
  • 43
  • 7
  • Does this help answer your question? https://stackoverflow.com/a/71985764/8690857 I think you just need to fix the homepage entry in package.json. – Drew Reese Dec 08 '22 at 21:25
  • No, none of that helped, sorry for not clarifying – Roman S. Dec 08 '22 at 21:28
  • So you've tried `"homepage": "https://1kiritos1.github.io/youtube-clone"`? And it *still* didn't work? I'm not sure what the issue is from here then. Are there any errors? What is the issue it routing/navigation? – Drew Reese Dec 08 '22 at 21:30
  • Yes, still didn't. There are no bugs in the console, but the navigation is broken, the site works correctly only if the particle /youtube-clone/ is removed, I think it'll be more understandable if you yourself go to this site ( after going in click on the icon on the top left): [Site](https://1kiritos1.github.io/youtube-clone/) – Roman S. Dec 08 '22 at 21:40
  • I see. It seems there's a disconnect between where you want the app to *think* it's running from (*https://1kiritos1.github.io/youtube-clone/*) and where it's ***actually*** deployed to and being served from (*https://1kiritos1.github.io/*). You might try adding a `basename="/youtube-clone"` prop to the `Router`, and then do a redirect to `"/youtube-clone"` to "bootstrap the app into the "sub-directory" where you want to app to appear to be running from. Does this make sense? – Drew Reese Dec 08 '22 at 22:04
  • I've changed the basename and nothing... my "homepage" is: `https://github.com/1KiritoS1/youtube-clone` – Roman S. Dec 08 '22 at 22:50
  • @DrewReese maybe problem in index? Should I wrap it like this: ` ` Does it make sense? – Roman S. Dec 09 '22 at 17:03
  • No, I don't believe it would make much of a difference if the router directly wraps `App` or if `App` renders the router, the router component just needs to be higher in the ReactTree than any component consuming the context it provides. – Drew Reese Dec 09 '22 at 17:06

0 Answers0