仅在Reaction应用程序的一个页面上刷新时，引导样式消失 [英] Bootstrap style disappearing on refresh only on one page in React app

问题描述

我正在开发一个带有引导模板的Reaction应用程序。到目前为止，我的所有页面都工作得很好，只有一个页面除外。当我单击指向此页面的链接时，模板加载正常，当我刷新此页面时，我会丢失引导样式。

这个页面与其他页面的唯一不同之处在于它是一个使用URL中的ID的显示页面。我不确定是反应还是引导导致了问题。我是新手，所以我猜这就是我呈现显示页面的方式。

显示传递ID的页面URL： Http://localhost:3000/Employee/1

显示页面代码：

import React, { Component } from 'react'

export default class EmpoyeeShow extends Component {
  constructor() {
    super();
    this.state = {
      employees: [],
      employee: {},
    };  
  
   }


    componentDidMount() {
        const id = this.props.match.params.userId;
        console.log("this.props.match.params.userId", this.props.match.params.userId)
      console.log("params", id)
        this.fetchEmployee(id)  
       
      }
       
  fetchEmployee = async (id) => {
    console.log("id", id)
      const response = await fetch(`/employees/`+ id)
      const initialUser = await response.json()
      const employees = initialUser
      this.setState({ employees })
      console.log("Employee", this.state.employees[0])
      const employee = this.state.employees[0]
      this.setState({employee: employee})
  }

 
  render() {
    const banner = {
      background:`url(../assets/images/bg/04.jpg)`, 
      backgroundSize: 'cover',
      backgroundPosition: 'center'}

      const breadcrumb = {
        background: 'transparent'
      }
    return (
      <> 
      <div class="innerpage-banner center bg-overlay-dark-7 py-7" style={banner}>
        <div class="container">
            <div class="row all-text-white">
                <div class="col-md-12 align-self-center">
                    <h1 class="innerpage-title">{this.state.employee.first_name}</h1>
          <h6 class="subtitle">{this.state.employee.title}</h6>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb" style={breadcrumb}>
                            <li class="breadcrumb-item active"><a href={this.state.employee.cv} target="_blank"><i class="ti-home"></i> CV</a></li>

                            <li class="breadcrumb-item active"><a href={this.state.employee.publications} target="_blank"><i class="ti-home"></i> Publications</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
     <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-6 align-self-center ">
                    <div class="title text-left">
                        <h2>About {this.state.employee.first_name}</h2>
                        <p class="p-0 mb-0">{this.state.employee.description} </p>
                    </div>
                </div>
                <div class="col-md-10 col-lg-6 mx-md-auto align-self-center ">
                    <img class="img-fluid w-100" src={this.state.employee.photo} alt=""/>
                    
                </div>
            </div>
        </div>
    </section>
      
      </>
     
    
      );
    
    }
  }

以下是正在运行的模板：

不工作：

推荐答案

我也遇到过这种情况，可能是您在另一个文件夹中，然后style.css的URL出错了，所以请将代码中的css设置为如下所示：

import '../App.css'

如果它还不能工作，有时您必须使用键盘上的硬刷新：

键入以下内容。ctrl + F5或ctrl + shift + r。我之所以分享这件事，是因为这件事发生在我身上，当我知道答案时，我想帮助人们。如果我帮了你，就让我知道。好运保重😀😀😀

这篇关于仅在Reaction应用程序的一个页面上刷新时，引导样式消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！