Fatal编程技术网
  • reactjs/
  • Reactjs 在react.js中刷新页面后，某些文件（js、css、图像）未加载

Reactjs 在react.js中刷新页面后，某些文件（js、css、图像）未加载

reactjs

Reactjs 在react.js中刷新页面后，某些文件（js、css、图像）未加载,reactjs,react-router,Reactjs,React Router,我有问题，我正在使用react路由器通过单击链接“更多”来访问完整的信息新闻页面，所有内容都显示并呈现良好，直到我更改了这两个页面中的某些内容 FullInfoNews.js export class FullInfoNews extends React.Component { render (){ return ( <div> <div className="row">

我有问题，我正在使用react路由器通过单击链接“更多”来访问完整的信息新闻页面，所有内容都显示并呈现良好，直到我更改了这两个页面中的某些内容

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>
        );
    }
}

导出类FullInfoNews扩展React.Component{
渲染（）{
返回(
{this.props.news.body}
{this.props.news.title}

);
}
}
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>

    );
}

导出默认类FullInfoMediaContainer扩展React.Component{
构造函数（）{
超级（）；
这个州={
新闻：[]
}
}
componentDidMount（）{
console.log（'componentDidMount777'）；
常量url=http://new-sciencepark.1gb.ru/api/getNewsById/“+this.props.params.id+”？lang=Ru'；
超级药剂
.get（url）
.query（空）
.set（'Accept'，'application/json'）
.end（（错误、响应）=>{
const news=response.body.data.news
log（JSON.stringify（news））；
这是我的国家({
新闻：新闻
})
})
}
render（）{
console.log（this.props）
const{params}=this.props；
返回(
{params.id}
);
}
}

问题是所有文件都没有加载，并显示404（未找到）错误。为什么我不明白？也许是DOM的问题

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>


科技园遗址
通过React路由器组件导航到URL与直接在浏览器中输入URL（刷新页面时基本上就是这样）不同

也就是说，如果您在端口5000上启动应用程序，打开浏览器并转到
localhost:5000
，然后单击一个按钮，将“/page1”推到浏览器历史记录，这样您将在
localhost:5000/page1
处结束，即与打开浏览器不同，在URL栏中键入
localhost:5000/page1
，然后按enter键。这是客户端对服务器端路由

你能给我们看一下你的index.html吗？

嗯，那是这些文件的正确路径吗？当URL成功加载时是什么样子的？是的，我很确定它们是正确的。此外，它是第一次加载，但当我刷新页面时，所有内容都会崩溃(（你能确认它们在工作和失败时都是完全相同的URL吗？如果是，你需要在错误日志中查找出了什么问题。哦，不，对不起，我错了，它们在成功加载时是不同的。例如，当路径失败时，路径是GET 404（找不到）。因此，本地路径应该是“app/img/logo1.pngSo，我将如何修复它？在您的index.html中，将您的所有路径更改为相对路径，即将href=“app/style.css”更改为href=“/app/style.css”，并查看是否可以消除您更改的路径刷新时出现的404错误（暂时不用担心代码中的图像路径）Jayce444您能解释为什么添加“正斜杠”解决了照片不渲染的问题？