如何解决在生产版本中更改路线时,不会渲染内部组件
我的行为很奇怪,问题是当我为生产而构建时,这是路由逻辑App.tsx:
function App() {
return (
<main>
<Route path="/" component={Agents} exact />
<Route path="/:agentName" component={Agent} />
</main>
);
}
Agents 组件也很好, Agent 也没问题,但是我在 Agent 中有一个组件, AgentProfile 无法呈现的组件,我不知道为什么, Agent.tsx :
import React,{ useEffect,useState } from 'react';
import { RouteChildrenProps,useParams } from 'react-router';
import { PuffLoader } from 'react-spinners';
import { Container,Row,Col } from 'react-bootstrap';
import classes from './Agent.module.scss';
import Navigation from '../Navigation/Navigation';
import AgentProfile from '../../components/AgentProfile/AgentProfile';
import Abilities from '../Abilities/Abilities';
import { IAgent,getAgent } from '../../API';
interface AgentProps extends React.Props<any>,RouteChildrenProps {}
export default function Agent(props: AgentProps) {
const params: any = useParams();
const [agentData,setAgentData] = useState<IAgent>();
const [isAgentLoaded,setIsAgentLoaded] = useState(false);
const [activeAbility,setActiveAbility] = useState(0);
const [isLoading,setIsLoading] = useState(false);
// fires when url changes
useEffect(() => {
// do the folowing only if 'agentName' param exists(/:agentName)
if (params.agentName) {
// gets the id from the queryParams
const id: any = new URLSearchParams(props.location.search).get('id');
setActiveAbility(0);
setIsAgentLoaded(false);
getAgent(id).then(agentData => {
setIsAgentLoaded(true);
setTimeout(() => {
setAgentData(agentData);
},250);
}).catch(error => console.log(error));
}
},[props.location,params]);
return (
<Container fluid style={{padding: 0}}>
<Row className={classes.HeaderRow} noGutters>
<Col xl={{offset: 1,span: 3}} className={classes.NavColumn}>
<Navigation />
</Col>
<Col xl="8">
{agentData && <AgentProfile // this doesn't get rendered at all
in={isAgentLoaded}
imgURL={agentData.imgURL}
role={agentData.role}
biography={agentData.biography} />}
</Col>
</Row>
{agentData && (<Row className={classes.ContentRow} noGutters>
<Col xl="6" style={{padding: 60}}>
<Abilities
abilities={agentData.abilities}
onClick={(index) => setActiveAbility(index)} />
</Col>
<Col xl="6">
<PuffLoader
size={200}
loading={isLoading}
css="margin: auto;"
color="white" />
<div
className={classes.Video}
style={{display: isLoading ? 'none' : 'flex'}}>
<video
loop
controls
autoPlay
onLoadStart={() => setIsLoading(true)}
onLoadedData={() => setIsLoading(false)}
src={agentData.abilities[activeAbility].videoURL}>
</video>
</div>
</Col>
</Row>)}
</Container>
)
}
我真的不知道问题出在什么地方,在开发模式下一切正常,问题出在生产版本中,没有找到解决方案。
一些屏幕截图,请注意chrome开发工具中的elements选项卡,我标记了确切的行: 开发中:
生产中的import React from 'react';
import { Transition } from 'react-transition-group';
import classes from './AgentProfile.module.scss';
const duration = 300;
const defaultStyle = {
transition: `${duration}ms`,opacity: 0
};
// "in&hide" states animation styles
const agentInfoStyles: any = {
entering: { opacity: 0,transform: 'translateY(-100px)' },entered: { opacity: 1,transform: 'none' },exiting: { opacity: 0,transform: 'translateY(100px)' },exited: { opacity: 0,transform: 'none' }
};
// "in&hide" states animation styles
const agentImageStyles: any = {
entering: { opacity: 0,transform: 'scale(0.9)' },transform: 'none' }
};
interface AgentProfileProps extends React.Props<any> {
imgURL: string;
role: string;
biography: string;
// Animation state control,true = animate "in to the VIEW",false = "hide from the VIEW"
in: boolean;
}
export default function AgentProfile(props: AgentProfileProps) {
return (
<div className={classes.AgentContainer}>
<Transition
in={props.in}
timeout={duration}>
{state => (<>
<img
style={{
...defaultStyle,...agentImageStyles[state]
}}
draggable={false}
src={props.imgURL}
alt="Agent"
className={classes.AgentImage} />
<div
className={classes.AgentInfo}
style={{
...defaultStyle,...agentInfoStyles[state]
}}>
<span>//</span>
<p>{props.role}</p>
<span>//</span>
<p>{props.biography}</p>
</div>
</>)}
</Transition>
</div>
)
}
^^ AgentProfile ^^
解决方法
好吧,我仍然不知道为什么它不起作用,我是说应该,但是我设法通过更改路由配置使其起作用,例如: App.tsx
<main>
<Route path="/" component={Agents} />
</main>
然后在 Agent.tsx
中<Route path={`${props.match.url}:agentName`} render={() => (
<AgentProfile
in={isAgentLoaded}
imgURL={agentData?.imgURL}
role={agentData?.role}
biography={agentData?biography} />
)}
而且,老实说,这样做是可行的,但是像这样配置路由确实有意义,但是,另一个路由没有错。它确实可以在开发模式下工作,但在生产模式下却不行。从来没有面对过这样的东西
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。