[英]Some files (js, css, images) aren`t loading after refreshing the page in react.js
I have problem, I am using react-router for accesing full info news page by clicking link "more", everything showing and rendering fine until I change something in these 2 pages. 我有问题,我使用react-router通过点击“更多”链接来访问完整信息新闻页面,所有内容都显示并呈现正常,直到我在这2页中更改内容。
FullInfoNews.js FullInfoNews.js
export class FullInfoNews extends React.Component {
render (){
return (
<div>
<div className="row">
<div className="about-title">
<div className="container">
<h2>{this.props.news.body}</h2>
<p>{this.props.news.title} </p>
<img className="center-block" src={this.props.news.image} />
</div>
</div>
</div>
</div>
);
}
}
FullInfoNewsContainer.js FullInfoNewsContainer.js
export default class FullInfoMediaContainer extends React.Component{
constructor(){
super();
this.state={
news:[]
}
}
componentDidMount(){
console.log('componentDidMount777');
const url='http://new-sciencepark.1gb.ru/api/getNewsById/'+this.props.params.id+'?lang=Ru' ;
superagent
.get(url)
.query(null)
.set('Accept', 'application/json')
.end ((error, response)=>{
const news=response.body.data.news
console.log(JSON.stringify(news));
this.setState({
news: news
})
})
}
render(){
console.log(this.props)
const {params}=this.props;
return(
<div>
{params.id}
<FullInfoNews news={this.state.news} />
</div>
);
}
} }
The problem is that all the files do not load and shows 404 (not found) error. 问题是所有文件都没有加载并显示404(未找到)错误。 Why i do not understand? 为什么我不明白? Maybe the problem with DOM? 也许是DOM的问题?
index.html 的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Technopark site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="app/style.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=AIzaSyD1USlQFgU5SK9iHulGnQwUEP7sB-d4Cew"></script>
<script src="app/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="/app/bundle.js"></script>
</body>
</html>
Navigating to URLs via React Router components is NOT the same as entering their URLs directly into the browser (which essentially what happens when you refresh a page). 导航到的URL通过阵营路由器成分是不一样的进入他们的网址直接进入浏览器(基本上,当你刷新页面会发生什么)。
That is, if you launch your app on port 5000, open the browser and go to localhost:5000
, then click a button that pushes "/page1" to the browser history so you end up at localhost:5000/page1
, that is NOT the same as opening up your browser, typing localhost:5000/page1
into the URL bar and hitting enter. 也就是说,如果您在端口5000上启动应用程序,请打开浏览器并转到localhost:5000
,然后单击将“/ page1”推送到浏览器历史记录的按钮,这样您最终会在localhost:5000/page1
,这不是与打开浏览器相同,在URL栏中键入localhost:5000/page1
并按Enter键。 It's client-side vs server-side routing. 它是客户端与服务器端路由。
Can you show us you index.html? 你能告诉我们index.html吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.