刷新或直接单击链接时找不到 React.js 页面

Question

我在此链接 (https://notchy-cross.000webhostapp.com) 上有一个反应项目。 如果您向下滚动，您会看到一个名为（产品类别）的部分， https://i.stack.imgur.com/QDHh2.png 当您单击其中一个时，它会将您带到https://notchy-cross.000webhostapp.com/mugs 或https://notchy-cross.000webhostapp.com/vases。 但问题是，如果你点击上面的链接，它会给你 404 页面，如果你点击主页上的链接，它只会显示内容，(https://notchy-cross.000webhostapp.com)，一旦你刷新页面，你就会得到 404 页面. 那为什么会这样呢？？

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

我在 GitHub Pages 上使用 BrowseRouter 时遇到了类似的问题。尝试使用HashRouter而不是BrowseRouter，它可能会起作用。

某些主机不像您的浏览器那样支持浏览器历史记录。 HashRouter 使用 URL 的哈希部分来保持 UI 与 URL 同步。

参考：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;