React.js page not found on refresh or on click on the link directly

Question

I have a react project on this link (https://notchy-cross.000webhostapp.com). if you scroll down you gonna see a section called (PRODUCT CATEGORIES), https://i.sstatic.net/QDHh2.png when you click on one of them it takes you to https://notchy-cross.000webhostapp.com/mugs or https://notchy-cross.000webhostapp.com/vases. but the problem is if you click on the link above its gives you the 404 page, it only shows the content if you click the link from the home page, (https://notchy-cross.000webhostapp.com), and once you refresh the page you get the 404 page. so why this is happening??

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.css";
import Navbar from "./Components/Navbar";
import Home from "./Components/pages/Home";
import About from "./Components/pages/About";
import Shop from "./Components/pages/Shop";
import Contact from "./Components/pages/Contact";
import CategoryPage from "./Components/CategoryPage";
import ProductPage from "./Components/pages/ProductPage";
function App() {
 return (
  <Router>
    <Navbar />
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/shop" component={Shop} />
      <Route path="/contact" component={Contact} />
      <Route path="/:to">
        <CategoryPage />
      </Route>
    </Switch>
  </Router>
 );
}

export default App;

CategoryItem.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./CateItem.css";
class CateItem extends Component {
render() {
 return (
   <div className="col-12 col-md-4">
     <Link to={`/${this.props.to}`}>
       <div
         className={`cricle text-center ${this.props.to
           ? this.props.to
           : ""}`}
       >
         <div className="circle-desc">
           <img src={`./images/${this.props.to}.png`} alt={this.props.to} />
           <h6>{this.props.to.toUpperCase()}</h6>
         </div>
       </div>
     </Link>
   </div>
  );
 }
}

export default CateItem;

Answer 1

I had similar problems using BrowseRouter on GitHub Pages. Try to use HashRouter instead of BrowseRouter, it may works.

Some hosts does not support browser history like your browser does. HashRouter uses the hash portion of the URL to keep the UI in sync with the URL.

refs: https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/

import React from "react";
import { HashRouter as Router, Switch, Route } from "react-router- 
dom";
import "./App.css";
import Navbar from "./Components/Navbar";
import Home from "./Components/pages/Home";
import About from "./Components/pages/About";
import Shop from "./Components/pages/Shop";
import Contact from "./Components/pages/Contact";
import CategoryPage from "./Components/CategoryPage";
import ProductPage from "./Components/pages/ProductPage";
function App() {
  return (
    <Router>
    <Navbar />
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/shop" component={Shop} />
      <Route path="/contact" component={Contact} />
      <Route path="/:to">
        <CategoryPage />
      </Route>
    </Switch>
  </Router>
 );
}

export default App;