react解决多级页面刷新时样式失效问题

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import MyNavLink from "./components/MyNavLink";
import Header from "./components/Header";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠<a>跳转不同的页面 */}
              {/* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
              <MyNavLink to="/hhh/about">About</MyNavLink>
              <MyNavLink to="/hij/hom">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由,switch可以匹配某一个路由，之后就不会在向下匹配了，可以提高匹配的效率 */}

                <Switch>
                  <Route path="/hhh/about" component={About} />
                  <Route path="/hij/home" component={Home} />
                  <Redirect to="about"/>{/*当前面的路径都没有匹配上的时候，就会重定向到about，一般用处页面一开始进来的时候做数据展示的首页*/}
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

这里注意<Redirect to="about"/>{/*当前面的路径都没有匹配上的时候，就会重定向到about，一般用处页面一开始进来的时候做数据展示的首页*/}

在自定义的MyNavLink里面添加了耳机路由，当点击了了路由，再刷新时，会出现加载bootstrap.css样式丢失问题，该怎么解决呢

第一种解决方案：

在index.html文件里面将./css/bootstrap.css变为%PUBLIC_URL%./css/bootstrap.css

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--<link rel="stylesheet" href="./css/bootstrap.css" /> 原来的样式-->
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css" /> 

 

第二种解决方案：

在index.html文件里面将./css/bootstrap.css变为/css/bootstrap.css

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--<link rel="stylesheet" href="./css/bootstrap.css" /> 原来的样式-->
    <link rel="stylesheet" href="/css/bootstrap.css" /> 

第三种方案（不常用）：原来的是用BrowserRouter 标签

现在需改为HashRouter标签

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>,
  document.getElementById("root")
);

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <HashRouter >
    <App/>
  </HashRouter >,
  document.getElementById("root")
);

 

 

本文地址：https://blog.csdn.net/u014496893/article/details/111882425