使用路由器，在我的基于反应类的应用程序中刷新页面时出现“无法获取/考试/0”

Question

当我单击特定考试时，网址会更改并且特定考试会呈现，但在页面刷新时，信息会丢失，并且我会收到 -> 例如，无法获取 /exams/0。如何让页面刷新时保持页面内容？

export const dummyExams = [
  {
    title: "Software Testing Fundamentals",
    content:
      "This QA exam covers the basic principles and techniques of software testing, including test planning, test case design, and defect management.",
  },
];

export default class FrontPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      isExamOpen: false,
      exams: [],
    };

    this.setIsExamOpen = this.setIsExamOpen.bind(this);
  }

  setIsExamOpen() {
    this.setState((prevState) => ({
      isExamOpen: !prevState.isExamOpen,
    }));
  }

  componentDidMount() {
    this.setState({ exams: dummyExams });
  }

  render() {

    return (
      <div className="Front-Page">
     
        <div className="Content-Holder">
          <main className="Main">
            <Routes>
              <Route
                path="/"
                element={this.state.exams.map((exam, i) => {
                  return (
                    <FrontPageExam
                      title={exam.title}
                      text={exam.content}
                      className={
                        this.state.exams.length - i <= 2 ? "Last-Exam" : "Exam"
                      }
                      key={i}
                      setIsExamOpen={this.setIsExamOpen}
                      id={i}
                    />
                  );
                })}
              ></Route>
              <Route path="exams/:id" element={<DetailedExam />}></Route>
              <Route path="/*" element={<Navigate to="/" />}></Route>
            </Routes>
          </main>
        </div>
      </div>
    );
  }
}

这是特定考试的组成部分：

class FrontPageExam extends Component {
  constructor(props) {
    super(props);
    // this.state = {
    //   showDetailedExam: false,
    // };
    this.onClickExam = this.onClickExam.bind(this);
  }

  onClickExam() {
    this.props.setIsExamOpen();
  }

  render() {
    return (
      <Link to={`/exams/${this.props.id}`}>
        <div
          className={this.props.className}
          // className="-mt4 -mb3 -fw4"
          onClick={this.onClickExam}
        >
          <div className="Exam-content">
            <div className="Exam-title">
              <strong>{this.props.title}</strong>
            </div>

            <span>{this.props.text}</span>
          </div>
        </div>
      </Link>
    );
  }
}

export default FrontPageExam;

当我单击一项考试时，这就是组件：

export default class DetailedExam extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hasStarted: false,
    };

    this.startExam = this.startExam.bind(this);
  }

  startExam() {
    this.setState({
      hasStarted: !this.state.hasStarted,
    });
  }

  componentDidMount() {

  }

  render() {
    return (
      <div>
        {/* {this.state.hasStarted ? (
          <App 
          // examType={}
          />
        ) : ( */}
          <div>
            <h1>Hi</h1>
            <span>Yalla</span>
            <div>
              <span>
                ...
              </span>
            </div>
            <button onClick={this.startExam}>Start</button>
          </div>
        {/* )} */}
      </div>
    );
  }
}

尝试做解决方法，搜索我需要后端文件，但这是我第一次使用基于类的反应来做到这一点，所以我不确定情况是否如此

Answer 1

我在 stackoverflow 帖子中进行了搜索，找到了应用程序开发早期阶段的最佳解决方案，当应用程序中没有配置服务器来处理对某些 URL 的请求时：

import { HashRouter } from "react-router-dom";
import FrontPageRoutes from "./components/UI/FrontPage_Routes";

ReactDOM.render(
  <HashRouter>
    <Provider store={store}>
      <FrontPageRoutes />
    </Provider>
  </HashRouter>,
  document.querySelector("#root")
);

这不是典型的 BrowserRouter，您在正常情况下会使用它，您有后端服务器来处理 url 请求。

基本上，这种方法（使用）对于 SEO 来说并不是最佳选择，但当您没有服务器时，这是一个很好的解决方法。

这是该帖子的链接，对我有帮助： React-router URL 在刷新或手动写入时不起作用