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 )