javascript - 访问链接后单击返回时找不到文件

Question

因此，我在 React 中创建了一个作品集网站，它可以正常工作，直到您单击我的一个 github 链接，然后尝试返回作品集页面。返回或在 URL 中键入特定路径时，您将获得 GH-pages 404 文件未找到页面。

当谈到 React 时，我是一个真正的初学者，我不知道如何解决这个问题。我用 BrowserRouter 猜测它的东西，但我不知道。这是我的 Index.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:

reportWebVitals();

这是我的 app.js 文件：

import React from "react";
import AboutSection from "./components/AboutSection";
//Global Style
import GlobalStyle from "./components/GlobalStyle";

// Import Pages
import AboutMe from "./pages/AboutMe";
import ContactMe from "./pages/ContactMe";
import MyWork from "./pages/MyWork";
import Nav from "./components/Nav";
import WorkDetail from "./pages/WorkDetail";
//Router
import { Switch, Route, useLocation } from "react-router-dom";
//Animation
import { AnimatePresence } from "framer-motion";
import ScrollTop from "../src/components/ScrollTop";

function App() {
  const location = useLocation();
  return (
    <div className="App">
      <GlobalStyle />
      <Nav />
      <AnimatePresence exitBeforeEnter>
        <Switch location={location} key={location.pathname}>
          <Route path="/" exact component={AboutMe}>
            <AboutMe />
          </Route>
          <Route path="/work" exact>
            <MyWork />
          </Route>
          <Route path="/work/:id">
            <WorkDetail />
          </Route>
          <Route path="/contact">
            <ContactMe />
          </Route>
        </Switch>
        <ScrollTop />
      </AnimatePresence>
    </div>
  );
}

export default App;

标签： javascripthtmlreactjs