reactjs - 如何防止我的 React 应用程序中的导航栏在页面刷新时重新呈现？

Question

我是 React 的新手，正在尝试弄清楚如何在页面刷新时保持导航栏的状态。

我有一个导航栏，其中包含“主页”和“项目”，每个都链接到各自的页面（./Home.js 和 ./Projects.js）。当用户在主页上时，仅显示“项目”链接，当用户在项目页面上时，仅显示“主页”链接。

我的代码工作得很好......直到页面被刷新；然后导航栏重新呈现到其原始状态，无论它在哪个页面上。如果重新加载浏览器，如何确保导航栏不会在页面上重新呈现？我了解为什么代码会以这种方式运行，但无法找到使导航栏在页面刷新时不重新呈现的解决方案。

Router.js 代码：

import React, { useState } from "react";
import { Link, Route, BrowserRouter } from "react-router-dom";
import Home from "./Home.js";
import Projects from "./Projects.js";

class Router extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showHome: false,
      showProjects: true
    };

    this.handleHomeClick = this.handleHomeClick.bind(this);
    this.handleProjectsClick = this.handleProjectsClick.bind(this);
  }

  handleHomeClick() {
    this.setState(() => ({
      showHome: false,
      showProjects: true
    }));
  }

  handleProjectsClick() {
    this.setState(() => ({
      showHome: true,
      showProjects: false
    }));
  }

  render() {
    const { showHome, showProjects } = this.state;
    return (
      <BrowserRouter>
        <Route exact path="/" component={Home} />
        <Route path="/projects" component={Projects} />

        <div className="navigation">
          <div className="navigation-sub">
            {showHome && (
              <Link
                to="/"
                className="nav-item"
                id="nav-home"
                onClick={this.handleHomeClick}
              >
                Home
              </Link>
            )}
            {showProjects && (
              <Link
                to="/projects"
                className="nav-item"
                id="nav-projects"
                onClick={this.handleProjectsClick}
              >
                Projects
              </Link>
            )}
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

export default Router;

App.js 代码：

import React from "react";
import Router from "./Router.js";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Router />
    </div>
  );
}

export default App;

标签： reactjs