javascript - 在 ReactJS 中重新加载路由是否需要页面刷新？
问题描述
我已经为我的投资组合网站设置了一些路线（标记为主页|关于|我做什么|经验的菜单链接），就像这样使用BrowswerRouter..
当我单击任何链接时，组件不会加载到页面上，或者至少它们没有正确呈现。为了让它们加载，我必须刷新页面。我知道这不是适当的行为。我还在学习 React Router 的方式。我需要帮助来理解为什么会发生这种行为并解决这个问题。下面是我使用的导入和渲染设置。我只想重申，当我在路由到我想要的组件后刷新页面时，它会正确呈现和加载。
谢谢各位码农！
一些文件供您参考和Git Repo :-)
应用程序.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;
时间线.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 问题。这实际上是我的这个特定代码的 CSS 问题style.css
.js .animate-box {
opacity: 0;
}
当路由分别渲染它们的组件时，不透明度会自动设置为 0。一旦页面被刷新，它就只使用不透明度作为过渡。如果我注释掉不透明度，组件就会显示而无需刷新页面
推荐阅读
- android - 如何获取免费应用程序的免费天气数据？OpenWeatherMap 限制为 60 次调用/分钟
- php - Laravel 保存方法不更新记录
- terraform - Terraform Enterprise 模块文件位置错误
- vba - 如何使用outlook vba将html内容附加到word中
- python - 在 Sklearn 的 SVC 中，当标签大小很大时，为什么训练时间与最大迭代不严格线性？
- node.js - 使用 Mongo 聚合有条件地计算集合中的外部字段
- android - 如何禁用显示输入文本的灰色框
- javascript - D3 和 java 脚本
- python - 如何从 Python 中的集合列表创建集合？
- ios - 重绘时未清除 UIBezierPath