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

简介: 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中 ./ 和 /  区别不同  /表示从项目暴露的资源目录开始查找

相关文章
|
3月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
175 13
|
5月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
215 67
|
7月前
|
前端开发 UED
在React Router中,如何处理路由的404错误页面?
在React Router中,如何处理路由的404错误页面?
259 57
|
7月前
|
前端开发
如何在React Router中进行路由重定向?
如何在React Router中进行路由重定向?
423 57
|
11月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫(Guarded Routes),使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态,实现 `PrivateRoute` 组件进行路由保护,并在 `App.js` 中使用。文章还讨论了常见问题和易错点,提供了处理异步操作的示例,帮助开发者提升应用的安全性和用户体验。
381 1
|
11月前
|
JavaScript 前端开发 开发者
React和Vue有什么区别?
React 和 Vue 都有各自的优势和特点,开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue,它们都在不断发展和完善,为前端开发提供了强大的支持。
873 58
|
11月前
|
前端开发 安全 网络安全
React——路由Route
React——路由Route
121 2
React——路由Route
|
11月前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
11月前
|
JavaScript 前端开发 算法
在性能上,React和Vue有什么区别
【10月更文挑战第23天】在性能上,React和Vue有什么区别
172 1
|
11月前
|
开发框架 JavaScript 前端开发
React和Vue之间的区别是什么
【10月更文挑战第23天】React和Vue之间的区别是什么
145 0