问题描述
我已经使用browswerRouter为我的投资组合网站设置了一些路线（标记为Home | About |我做什么|经验的菜单链接）。
当我单击任何链接时，这些组件不会在页面上加载，或者至少它们不能正确呈现。为了让他们加载，我必须刷新页面。我知道这不是适当的行为。我还在学习React Router的方式。我需要帮助了解为什么会发生这种现象并解决此问题。下面是我使用的导入和我拥有的渲染设置。我只想重申一下，当我将页面路由到所需的组件后刷新页面时，它将正确呈现和加载。
谢谢编码员！
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;
当我检查其中任何一个时，控制台中什么都没有真正显示出来...
解决方法
我发现问题根本不是React Router的问题。实际上，这是我的style.css
.js .animate-box {
opacity: 0;
}
当路线渲染其组件时，不透明度分别自动设置为0。刷新页面后，将不透明度仅用作过渡。如果我注释掉不透明性，则显示的组件无需刷新页面