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

相关文章
|
22小时前
|
前端开发 JavaScript API
React小记(四)_路由的基本使用
React小记(四)_路由的基本使用
6 1
|
10天前
|
JavaScript 算法 前端开发
vue和react的diff算法的区别
vue和react的diff算法的区别
|
22天前
|
JavaScript 前端开发
react的参数值和Vue的参数值有什么区别
react的参数值和Vue的参数值有什么区别
|
2天前
|
XML JavaScript 前端开发
vue和react的区别
vue和react的区别
9 0
|
22天前
|
XML JavaScript 前端开发
Vue和React的区别
Vue和React的区别
|
1月前
|
前端开发 JavaScript API
Vue.Draggable 和 React Beautiful DND 有什么区别
Vue.Draggable 和 React Beautiful DND 是两个用于 Vue.js 和 React 的拖拽排序库。Vue.Draggable 提供 Vue 指令,适合 Vue 应用,支持列表排序和自定义数据处理,具有多种事件回调和配置选项。React Beautiful DND 则为 React 提供组件,能处理复杂拖拽场景,通过回调函数更新状态,配置选项包括限制拖拽范围和自定义动画。
|
1月前
|
前端开发 JavaScript 开发者
React的函数组件与类组件:探索两者之间的区别
【4月更文挑战第25天】React提供函数组件和类组件,两者在语法、状态管理、生命周期和性能优化上有所不同。函数组件简单且易于理解,使用 Hooks 可添加状态管理;类组件支持复杂状态管理和生命周期方法,适用于需要精细控制更新的场景。随着 Hooks 的发展,函数组件功能增强,成为更多开发者的首选。选择组件类型应根据实际需求权衡。
|
1月前
|
资源调度 前端开发 JavaScript
React Router:React应用的路由管理
【4月更文挑战第25天】React Router是React的官方路由库,用于管理SPA的路由。它基于组件,将URL映射到React组件,核心概念包括路由、链接和导航。设置路由时,在根组件中使用BrowserRouter或HashRouter,包裹Routes组件,定义Route规则。Link组件用于创建内部链接,实现导航。高级特性包括嵌套路由、参数化路由和编程式导航,如子路由、动态参数和JavaScript控制的导航。掌握React Router能帮助开发者更高效地构建复杂的React应用。
|
1月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
1月前
|
JavaScript 前端开发 开发者
你知道 React 和 Vue 的区别?
【4月更文挑战第16天】React与Vue是两种流行的前端框架,各有特色。React是JavaScript库,强调组件化和函数式编程,使用虚拟DOM提升性能;Vue是渐进式框架,提供全面解决方案,更易上手。React采用单向数据流和状态管理库如Redux,Vue则有双向数据绑定和响应式系统。组件通信方面,React依赖props和context,Vue更灵活,提供插槽和提供/注入。虚拟DOM实现上,React注重效率,Vue强调易用性。学习曲线方面,React社区活跃但学习难度稍大,Vue文档清晰,易于入门。选择框架应考虑项目需求、团队技能和个人偏好。
19 0