a link可能改变的几种状态

本文详细介绍了CSS中四种超链接的不同样式设置方法:a:link用于定义未访问过的链接样式;a:visited定义已访问过的链接样式;a:hover定义鼠标悬停在链接上的样式;a:active则定义活动链接的样式。
a:link { color: #0033ff; text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; color: #FF0000; }
a:active { text-decoration: none; }
 
 
这几个设置的是超链接样式 a:link 链接未点击上去时候 a:visited 链接已经点击过的 a:hover 鼠标放在链接上未点击 a:active 是介于hover visited 之间的一个状态,可以说是链接被按下时候的状态
 
 
 
React Router 是 React 应用程序中用于处理客户端路由的流行库。它支持多种路由模式,主要有以下几种常见的写法: 1. **基本路由(BrowserRouter)**:这是最基础的路由,基于 HTML5 的 History API。`<Router>` 组件通常包含 `<Route>` 子组件,每个 `<Route>` 标记了一个特定的 URL。例如: ```jsx import { BrowserRouter as Router, Route } from 'react-router-dom'; function App() { return ( <Router> <Route path="/" component={Home} /> <Route path="/about" component={About} /> </Router> ); } ``` 2. **Hash Router**:当浏览器不支持 HTML5 History API 时,可以使用 Hash Router,通过 URL 中的哈希片段 (#) 来表示路由。写法类似: ```jsx import { HashRouter, Route } from 'react-router-dom'; function App() { return ( <HashRouter> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </HashRouter> ); } ``` 3. **Memory Router**:内存路由器只在单页应用内部有效,适用于无状态组件之间的导航。它并不实际改变 URL,而是维护组件树的状态。例如: ```jsx import { MemoryRouter } from 'react-router-dom'; function App() { return ( <MemoryRouter> <Switch> <Route path="/" component={Home} /> <Route path="/about" component={About} /> </Switch> </MemoryRouter> ); } ``` 4. **Link组件和NavLink组件**:除了 `<Route>`,还有专用的 `<Link>` 和 `<NavLink>` 组件,用于创建可击的链接,自动匹配当前路由。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值