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>