在ReactJS中重新加载路由所必需的页面刷新？

Question

我已经为我的投资组合网站设置了几条路径(菜单链接，标签是Home，关于我做了什么?体验)，比如使用BrowswerRouter。

​

当我单击任何链接时，组件不会加载到页面上，或者至少它们没有正确呈现。为了让他们加载，我必须刷新页面。我知道这是不合适的行为。我还在学习反应路由器的方法。我需要帮助理解为什么会发生这种行为并解决这个问题。下面是我使用的导入和渲染设置。我只想重申，一旦我将页面路由到我想要的组件，它就会正确地呈现和加载页面。

谢谢各位程序员！

一些供您参考的文件和Git Repo :-)

App.js

    import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./App.css";
import Introduction from "./components/introduction";
import About from "./components/about";
import WhatIDo from "./components/whatido";
import Timeline from "./components/timeline";
import Footer from "./components/footer";

const App = () => {
  const [email, setEmail] = useState("");
  const [summary, setSummary] = useState("");
  const [myLinks, setMyLinks] = useState([]);

  useEffect(() => {
    fetch("https://gitconnected.com/v1/portfolio/kevindennyii")
      .then((response) => response.json())
      .then((data) => {
        //setName(data.basics.name);
        setEmail(data.basics.email);
        setSummary(data.basics.summary);
        setMyLinks(data.basics.profiles);
      });
  }, []);

  return (
    <Router>
      <div id="colorlib-page" style={{ backgroundColor: "#F4F5F4" }}>
        <div
          id="container-wrap"
          style={{ marginLeft: "5rem", marginRight: "5rem" }}
        >
          <div>
            <section
              className="colorlib-experience"
              style={{
                marginTop: "0px",
                marginBottom: "0px",
                paddingBottom: "0px",
                paddingTop: "0px",
              }}
              data-section="home"
            >
              <Introduction myLinks={myLinks} email={email} />
              <nav style={{ textAlign: "center" }}>
                <Link to="/">Home</Link>|<Link to="/about">About</Link>|
                <Link to="/expertise">What I Do</Link>|
                <Link to="/experience">Experience</Link>
              </nav>
            </section>
            <hr className="divider gradient" contentEditable />
          </div>
          <Switch>
            {/* use the render attribute to pass props to the route with the */}
            {/* arrow function because this will update the component as opposed to */}
            {/* component={() => <Dashboard isAuthed={true} /> */}
            <Route
              path="/about"
              render={(props) => <About {...props} summary={summary} />}
            />
            <Route path="/expertise" render={() => <WhatIDo />} />
            <Route path="/experience" component={Timeline} />
          </Switch>
        </div>
        <Footer />
      </div>
    </Router>
  );
};

export default App;

一对组件

whatido.jsx

import React from "react";

const WhatIDo = () => {
  return (
    <section className="colorlib-about" data-section="whatido">
      <div className="colorlib-narrow-content">
        <div className="row">
          <div
            className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
            data-animate-effect="fadeInLeft"
          >
            <span className="heading-meta">What I do?</span>
            <h2 className="colorlib-heading">Here are some of my expertise</h2>
          </div>
        </div>
        <div className="row row-pt-md">
          <div className="col-md-4 text-center animate-box">
            <div className="services color-1">
              <span className="icon">
                <i className="icon-bulb" />
              </span>
              <div className="desc">
                <h3>Web Development </h3>
                <p>
                  I have experience building websites using Content Management
                  Systems like Wordpress. I have professional experience coding
                  in JavaScript, HTML, CSS, and object-oriented languages.
                </p>
              </div>
            </div>
          </div>
          <div className="col-md-4 text-center animate-box">
            <div className="services color-3">
              <span className="icon">
                <i className="icon-phone3" />
              </span>
              <div className="desc">
                <h3>Data Structures & Algorithms</h3>
                <p>
                  As coming from the CS background, I have good grasp over
                  fundamental concepts of DSA
                </p>
              </div>
            </div>
          </div>
          <div className="col-md-4 text-center animate-box">
            <div className="services color-5">
              <span className="icon">
                <i className="icon-data" />
              </span>
              <div className="desc">
                <h3>Dev Ops</h3>
                <p>
                  I am Amazon Web Services (AWS) certified as a Developer
                  Associate. I have 3 years of experiences in configuring and
                  managing data solution with AWS
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
export default WhatIDo;

timeline.jsx

import React from "react";

// TODO
const Timeline = () => {
  return (
    <div>
      <section className="colorlib-experience" data-section="timeline">
        <div className="colorlib-narrow-content">
          <div className="row">
            <div
              className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
              data-animate-effect="fadeInLeft"
            >
              <span className="heading-meta">highlights</span>
              <h2 className="colorlib-heading animate-box">Timeline</h2>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12">
              <div className="timeline-centered">
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInLeft"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-3">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        Director of Operations at{" "}
                        <a
                          href="https://www.ohhdennyservices.com"
                          style={{ color: "#2c98f0" }}
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          OhhDenny Services, LLC
                        </a>{" "}
                        <br />
                        <span>June 2015 - present</span>
                      </h2>
                      <div>
                        <p>
                          We assist smaller business, mostly concentrating on
                          HIPPA, with Cyber Security, Software & Hardware
                          Installation and Updates, and Network Configuration.
                          We also build websites using Content Management
                          Systems like WordPress and technologies such
                          JavaScript, CSS3 & HTML5.{" "}
                        </p>
                        <p>
                          Network Upgrade for Ideal Nursing Services, Inc.: For
                          this project, I hired two other professionals to
                          assist with taking Ideal Nursing from a wired network
                          to a wireless network. Measurements of the building
                          were taken to create proper network diagrams for
                          approval by Ideal Nursing. Wires were removed and
                          Wireless Access Points (WAPs) were then installed and
                          configured. All machines were upgraded and/or
                          configured to connect to the WAPs. In addition, a new
                          rack with POE ports was installed in their server room
                          for their server, multi-port hub and router. This
                          created a more efficient working space and alleviated
                          unnecessary clutter.
                        </p>
                        <div>
                          Websites:
                          <ul>
                            <li>
                              <a
                                href="https://jacobdavidproperties.com/"
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                Jacob David Properties, LLC
                              </a>{" "}
                              - Selma , TX
                            </li>
                            <li>
                              <a
                                href="https://www.diamondgrovebaptist.com"
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                Diamond Grove Baptist Church, Inc
                              </a>{" "}
                              - Franklin, VA
                            </li>
                            <li>
                              <a
                                href="https://www.oberryamezionchurch.org"
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                O'Berry A. M. E. Zion Church
                              </a>{" "}
                              - Franklin, VA
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInTop"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-4">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        Software Engineer at iHeartMedia, Inc <br />
                        <span>Feb 2019 - July 2020</span>
                      </h2>
                      <p>
                        Currently working on iHeartMedia's Music Lab team. I
                        assist in the maintaining and improving of a web
                        application that assist in helping program directors of
                        iHeartRadio stations determine how air time (spins) for
                        songs will be distributed across radio stations. I am
                        working as both a Software Engineer and Data Analytics
                        team liaison on the Music Lab team. Some of my tasks
                        include architecting solutions with NodeJS, automating
                        AWS CodeBuilds using CloudWatch events for our MySQL
                        databases, improving technical documentation, and
                        learning both our data analytics and software
                        development stack (ReactJS) for Music Lab.
                      </p>
                      <p>
                        I conducted a Proof of Concept analysis to present to VP
                        of Data Engineering & Analytics for using an aiWare
                        platform that uses GraphQL. This was an idea to help
                        iHeartMedia automate the analysis of some of its market
                        data like spots and digital impression
                      </p>
                      <p>
                        Previously apart of the Salesforce team, working with
                        the Campaign Recap application which kept track of
                        iHeartMedia's clients radio ad campaigns. I briefly
                        worked with our Kibana instance in attempt to improve
                        logging. I updated our software architecture. I also
                        performed a technical analysis with Vertione One in
                        using there development platform with GraphiQ that could
                        possible help iHeartMedia automate some of its
                        processes.
                      </p>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInLeft"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-5">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        Lead Technologist at Booz Allen Hamilton, Inc <br />
                        <span>Oct 2015 - Jan 2019</span>
                      </h2>
                      <div>
                        I have written training documentation for the Air Force
                        serving as an Elastic Stack Subject Matter Expert (SME)
                        creating Elastic Stack training courses. This included
                        modules for:
                        <ul>
                          <li>The Overview of Elastic Stack</li>
                          <li>The understanding and use of Elasticsearch</li>
                          <li>The understanding and use of Logstash</li>
                          <li>
                            The understanding and use of Kibana The
                            understanding of Beats
                          </li>
                        </ul>
                        I have created learning documentation for server
                        configuration (Puppet) and YAML
                        <br />
                        <br />
                        I participated as a member of an Agile Coaching team for
                        the Air Force, practicing Scrum using Sprints. I wrote
                        guidance for development teams such as how-to-guides and
                        best practices for use of Agile methodologies.
                        <br />
                        <br />
                        I served as a member of the DoD community working as an
                        Application Lead/Senior Developer working with and
                        managing Amazing Web Services (AWS) EC2 instances
                        building a Java application that would create and
                        maintain IT disaster recovery plans.
                        <br />
                        <br />
                        I lead and participated on projects working with
                        technologies such as PostgreSQL, MongoDB, ExpressDB,
                        AngularJS and NodeJS (MEAN) web development, Java and
                        other Microsoft technologies.
                        <br />
                        <br />
                        Internally, for Booz Allen Hamilton, I have configured
                        and implemented a prototype website using Drupal with
                        Acquia cloud.
                      </div>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInLeft"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-6">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        Senior Web Developer at Sevatec, Inc <br />
                        <span>Nov 2014 - Jun 2015</span>
                      </h2>
                      <p>
                        I fulfilled the role of Web Developer as a member of the
                        Implementation Team for Content Management System (CMS),
                        redesigning of the <b>US Embassy websites</b> at the IIP
                        bureau of the <b>Department of State</b>. We were part
                        of the UI/UX team with this task. We conducted wireframe
                        testing, user interviews, and analysis on the both
                        tasks.
                        <br />
                        <br />
                        As a web developer, I was responsible for the
                        development of websites and mobile applications on
                        Amazon Web Services (AWS) via WordPress, assisting with
                        technical documentation and end-user training &
                        development transition plans. I participated in weekly
                        calls with WordPress VIP and Automattic (creators and
                        founders of WordPress) to receive guidance towards
                        implementing possible solutions for the client. I also
                        created and implemented the US Embassy Travel Alert
                        Wordpress plugin which incorporates travel warnings and
                        alerts using a JSON file from travel.state.gov.
                      </p>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInLeft"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-5">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        Software Developer at Buchanan & Edwards, Inc <br />
                        <span>Nov 2013 - Oct 2014</span>
                      </h2>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInLeft"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-3">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        Software Developer at Creative Information Technology,
                        Inc
                        <br />
                        <span>May 2010 - Oct 2013</span>
                      </h2>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInLeft"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-2">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        Web Developer/IT Consultant at Intepros Federal
                        Consulting, Inc
                        <br />
                        <span>Sep 2009 - Apr 2010</span>
                      </h2>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry animate-box"
                  data-animate-effect="fadeInLeft"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-1">
                      <i className="icon-pen2" />
                    </div>
                    <div className="timeline-label">
                      <h2>
                        IT Specialist at IBM, Inc <br />
                        <span>Aug 2007 - Sep 2009</span>
                      </h2>
                    </div>
                  </div>
                </article>
                <article
                  className="timeline-entry begin animate-box"
                  data-animate-effect="fadeInBottom"
                >
                  <div className="timeline-entry-inner">
                    <div className="timeline-icon color-none" />
                  </div>
                </article>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Timeline;

当我检查的时候控制台里没有任何东西.

​

Answer 1

我发现这些问题根本不是一个反应路由器问题。实际上，这是我的style.css中发现的这个特定代码的CSS问题。

.js .animate-box {
  opacity: 0;
}

当路由呈现其组件时，不透明度将自动设置为0。一旦页面被刷新，它将使用不透明度作为一个转换。如果我注释掉不透明度，组件就会显示出来，而不必刷新页面。