Mastering Development

Bootstrap style disappearing on refresh only on one page in React app

I am working on a react app with a bootstrap template. So far all my pages work well except for one page. When I click on a link to this page the template loads fine, when I refresh on this page I loose my bootstrap styling.

The only thing different about this page from the others is its a show page that uses an id from the url. I am not sure if it is the react or the bootstrap causing the problem. I am new to react so I am guessing it is how I am rendering the show page.

show page url an id is passed :

The show page code:

import React, { Component } from 'react'

export default class EmpoyeeShow extends Component {
  constructor() {
    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)
  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 = {
      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={} 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>
        <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 class="col-md-10 col-lg-6 mx-md-auto align-self-center ">
                    <img class="img-fluid w-100" src={} alt=""/>

Here is the template working:enter image description here

Not working:enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *