3

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.stack.imgur.com/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;
AMK
  • 43
  • 5
  • Either use "HashRouter" from react-router. add hashrouter in your root index.js or use webpack, or a server to point all request to / – sojin Sep 18 '21 at 04:51
  • Does this answer your question? [Deploying Reactjs website on github pages with routing results in 404 error on refresh](https://stackoverflow.com/questions/57883297/deploying-reactjs-website-on-github-pages-with-routing-results-in-404-error-on-r) – Vinay Sharma Sep 18 '21 at 15:29

1 Answers1

3

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;
Erick Silva
  • 338
  • 1
  • 5