react脚手架解决多级路径刷新样式丢失

最新推荐文章于 2024-07-16 14:30:20 发布

路C飞

最新推荐文章于 2024-07-16 14:30:20 发布

阅读量259

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44215434/article/details/121415549

版权

react脚手架解决多级路径刷新样式丢失

问题

在原本的路由上增加一层
   <MyNavLink to="/about" title="About"></MyNavLink>            
   <Route path="/about" component={About} ></Route>
变为
  <MyNavLink to="/test/about" title="About"></MyNavLink>            
   <Route path="/test/about" component={About} ></Route>                
会出现样式丢失

解决

修改index.html
在public的index.html中引入样式，不写 ./ 写 /
或者在public的index.html中引入样式，不写 ./ 写 %PUBLIC_URL%

原本的html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="icon" href="./css/bootstrap.css" />
    <title>react脚手架</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
修改其中的
 <link rel="icon" href="./css/bootstrap.css" />
 为
 <link rel="icon" href="/css/bootstrap.css" />
 或者为
 <link rel="icon" href="%PUBLIC_URL%/css/bootstrap.css" />

修改BrowserRouter换为HashRouter

修改包裹的BrowserRouter
<BrowserRouter>
        <App/>
</BrowserRouter>
换为
<HashRouter>
        <App/>
</HashRouter>

路C飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react脚手架解决多级路径刷新样式丢失

react脚手架解决样式丢失问题在原本的路由上增加一层 <MyNavLink to="/about" title="About"></MyNavLink> <Route path="/about" component={About} ></Route>变为 <MyNavLink to="/test/about" title="About"></MyNavLink>
复制链接

扫一扫