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

应用程序.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;

类别项.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;