解决多级路径刷新页面样式丢失的问题

第一种方法 去掉 相对路径

<link rel="stylesheet" href="./css/bootstrap.css" />

转换成

<link rel="stylesheet" href="/css/bootstrap.css" />

转换成绝对路径

<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css" />

使用HashRouter来设置路由

// 引入react核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 
import {
      HashRouter } from 'react-router-dom'

// 引入App组件
import App from './App'

// 渲染到App页面
ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
)

总结

  1. public/index.htm1 中引入样式时不写./ 写(常用)
  2. public/index.html 中引入样式时不写./(是适用于react)写%PUBLIC_URL%(常用)
  3. 使用HashRouter

你可能感兴趣的:(笔记,前端,react,样式丢失)