四、【React-Router5】样式丢失问题

1、先上结论

1. public/index.html 中 引入样式时不写 ./ 写 / [ 常用 ]
2. public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% [ 常用 ]
3. 使用 HashRouter

2、修改上一节代码

点击访问 上节代码；有点套娃，请耐心查看

然后确定在 index.html 里引入样式代码是这样写的：

<MyNavLink to="/xxx/about">About</MyNavLink>
<MyNavLink to="/xxx/home">Home</MyNavLink>

<Switch>
    <Route path='/xxx/about' component={About} />
    <Route path='/xxx/home' component={Home} />
</Switch>
1
2
3
4
5
6
7

3、发现问题

点击路由跳转后刷新页面，结果：样式丢失，效果图如下

4、分析原因

• 正常请求的样式文件地址：http://localhost:3000/css/bootstrap.css
• 修改后样式文件请求地址：http://localhost:3000/xxx/css/bootstrap.css

问题很明显，这个地址下并没有 bootstrap.css 文件，默认返回了 index.html 文件，响应结果如下所示：

5、3个解决办法

1. 【使用绝对路径】index.html 里引入样式代码改成这样：

2. 【使用绝对路径】index.html 里引入样式代码改成这样：

3. 【改用HashRouter】index.js 改成如下：

   1. import React from 'react';
      import ReactDOM from 'react-dom/client';
      import { HashRouter } from 'react-router-dom'
      import App from './App';
      
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(
        <React.StrictMode>
          <HashRouter>
            <App />
          </HashRouter>
        </React.StrictMode>
      );
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

   2. 使用HashRouter不管怎么刷新，地址栏都是 http://localhost:3000/#/xxx/about，# 号前面才是真正的地址，后面都是哈希值，不会拼接到请求地址上，同样避免了上面的问题