Javascript 在ReactJS中重新加载路由需要页面刷新吗？
我使用Javascript 在ReactJS中重新加载路由需要页面刷新吗？,javascript,reactjs,react-router,react-router-dom,Javascript,Reactjs,React Router,React Router Dom,我使用BrowswerRouter为我的投资组合网站设置了一些路线（菜单链接标记为Home | About |我做什么|体验）。。 当我点击任何链接时，组件不会加载到页面上，或者至少它们没有正确呈现。为了让他们加载，我必须刷新页面。我知道这是不合适的行为。我还在学习反应路由器的方法。我需要帮助理解为什么会发生这种行为并解决这个问题。下面是我使用的导入和渲染设置。我只想重申，当我刷新页面时，一旦我路由到我想要的组件，它就会正确地呈现和加载 谢谢各位程序员 一些供您参考的文件和：-） App.js
BrowswerRouter 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;
import React，{useState，useffect}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
导入“/App.css”；
从“/components/Introduction”导入简介；
从“/components/About”导入关于；
从“/components/WhatIDo”导入WhatIDo；
从“/components/Timeline”导入时间线；
从“/components/Footer”导入页脚；
常量应用=（）=>{
const[email，setEmail]=useState（“”）；
const[summary，setSummary]=useState（“”）；
const[myLinks，setMyLinks]=useState（[]）；
useffect（（）=>{
取回（“https://gitconnected.com/v1/portfolio/kevindennyii")
.then（（response）=>response.json（））
。然后（（数据）=>{
//setName（data.basics.name）；
setEmail（data.basics.email）；
集合摘要（数据.基础.摘要）；
SetMyLink（数据.基础.配置文件）；
});
}, []);
返回(
家|
我做什么|
经验
{/*使用render属性通过*/}将道具传递给路由
{/*arrow函数，因为这将更新组件，而不是*/}
{/*组件={（）=>*/}
{" "}
2015年6月至今
我们帮助小型企业，主要集中在
HIPPA，配备网络安全、软件和硬件
安装和更新，以及网络配置。
我们还使用内容管理构建网站
像WordPress这样的系统和技术
JavaScript、CSS3和HTML5.{'}
理想护理服务有限公司的网络升级：用于
在这个项目中，我雇佣了另外两名专业人员
协助从有线网络获取理想护理
连接到无线网络。建筑物的测量
用于创建适当的网络图
由理想护理人员批准。拆除电线并
然后安装并安装无线接入点（WAP）
已配置。所有计算机都已升级和/或
配置为连接到WAPs。此外，新的
带有POE端口的机架安装在其服务器室内
对于他们的服务器、多端口集线器和路由器
创造了更高效的工作空间，减轻了
不必要的混乱。
网站：
-
{" "}
-德克萨斯州塞尔玛
-
{" "}
-弗吉尼亚州富兰克林
-
{" "}
-弗吉尼亚州富兰克林
我发现问题根本不是一个路由器问题。事实上，这是一个CSS问题，在我的样式中可以找到此特定代码。CSS
.js .animate-box {
opacity: 0;
}
当路由渲染其组件时，不透明度分别自动设置为0。刷新页面后，仅使用不透明度作为过渡。如果我注释掉不透明度，则显示的组件无需刷新页面您使用的是BrowserRouter
还是HashRouter
？哪个路由您正在使用的er？是BrowserRouter吗？您以前尝试过包装吗？多个问题，将交换机包装在BrowserRouter/HashRouter中。“/”未定义。请检查您的控制台，如下所示：well@jain我删除了“/”现在，我会回到它，但这真的没有在手的问题上的交换机包装的BrowserRouter。Thanks@PranayTripathi我正在使用BrowserRouter
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;
.js .animate-box {
opacity: 0;
}