gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:03:41 25 4
gpt4 key购买 nike

我在这个链接上有一个 React 项目 ( https://notchy-cross.000webhostapp.com )。如果你向下滚动你会看到一个名为(产品类别)的部分, /image/QDHh2.png当你点击其中之一时,它会带你到 https://notchy-cross.000webhostapp.com/mugshttps://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;

最佳答案

我在 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;

关于reactjs - 刷新或直接单击链接时找不到 React.js 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69231618/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com