0
点赞
收藏
分享

微信扫一扫

React路由的使用 Redirect默认展示某一个页面 Switch找到停止 BrowserRouter和HashRouter 的区别

引入
Redirect 默认展示某一个页面
Switch 一旦找到 路由 就停止 不会在往下找了

App.js
import {Link,Route,NavLink,Redirect,Switch} from "react-router-dom"

<NavLink to="/chuli" activeClassName="demo">Chuli</NavLink>
<NavLink to="/clock" activeClassName="demo">Clock</NavLink>

<Switch>
<Route path="/Chuli" component={Chuli}></Route>
<Route path="/Clock" component={Clock}></Route>
<Redirect to="/chuli"></Redirect> //默认展示chuli页面
</Switch>


BrowserRouter 这一种 兼容性不好 多次刷新的时候 css样似可能会丢失
HashRouter 这一种兼容好 但是有锚点
如何解决 BrowserRouter的缺点

使用连接的时候 加上 %PUBLIC_URL%
home.css 在public目录下
<link rel="stylesheet" href="%PUBLIC_URL%/home.css"> 可以解决


<link rel="stylesheet" href="./home.css"> 失败
在react中 ./ 和 / 区别不同 /表示从项目暴露的资源目录开始查找

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。



作者:晚来南风晚相识

如果文中有什么错误,欢迎指出。以免更多的人被误导。

举报

相关推荐

0 条评论