React-router( 路由 HashRouter 和 BrowserRouter 模式)

本文详细介绍了React Router 4+版本的使用方法,包括BrowserRouter和HashRouter两种模式,展示了如何在项目中设置路由,使用Switch、Route、NavLink组件进行页面跳转和激活状态管理。

react-router

  1. 我们使用的是4.+版本,使用的是react-router-dom

  2. react-router是3.x的版本

  3. 路由的模式有两种

    • 老浏览器提供的 hash模式, 我们称之为: HashRouter
    • H5提供的的 history 模式,我们称之为 BrowserRouter
      注意: H5模式的路由需要后端支持
  4. 使用路由

  5. 在index.js中使用路由模式将组件包裹

  // HashRouter 是 老版本的浏览器的history提供的hash路由模式
  // BrowserRouter 是 H5提供的history模式
  // import { HashRouter as Router }  from 'react-router-dom'
  import { BrowserRouter as Router } from 'react-router-dom'

  ReactDOM.render(
  <Router>
    <App />
  </Router>
  , document.getElementById('root'));

  1. 书写路由展示区域, 使用 Route path是路径 component 是组件
  <Route path = "/list" component = { List }></Route>
  1. 重定向
  • 第一种
<Route to = "/" component = { Home }/>
  • 第二种
  1. 路径完全匹配 exact
<Route to = "/" component = { Home } exact/>
  1. Switch ( 路由只匹配一次 )
    <Switch>
      <Route path = "/" component = { Home } exact></Route>
      <Route path = "/home" component = { Home }></Route>
      <Route path = "/mine" component = { Mine } ></Route>
      <Route path = "/mine/login" component = { Login } exact   ></Route>
      <Route path = "/list" component = { List }></Route>
    </Switch>
  1. NavLink( 路由激活时可以用activeClassName 来添加active类名 )
<NavLink  activeClassName="active"  className="nav-link" to = "/home">Home</NavLink>
### 反应路由器域与反应路由器的区别 #### 历史背景与发展 `react-router-dom` 是 `react-router` 的特定实现之一,专门用于浏览器环境中的React应用程序。随着Web开发的发展技术栈的变化,路由库也经历了迭代更新以适应新的需求最佳实践。 #### 主要差异点 ##### 1. 环境适配性 `react-router-dom` 特定于DOM环境中运行的应用程序,提供了针对HTML5历史API的支持以及链接处理等功能[^1]。相比之下,`react-router` 更像是一个抽象层,可以被不同平台的具体实现在之上构建,比如服务器端渲染(SSR),原生移动应用等场景下的变体如 `react-router-native`。 ##### 2. 组件集合的不同 两者都提供核心的路由管理功能,但在具体组件上有所区分: - **Link**: 在 `react-router-dom` 中存在 `<Link>` 组件来创建可点击的超链接,而在更通用版本里可能不存在此预定义组件。 - **BrowserRouter HashRouter**: 这些是专门为客户端web页面设计的历史对象封装器,在 `react-router-dom` 提供了这两种方式让用户选择如何管理同步URL状态变化;而基础版则不直接涉及这些概念[^2]. ```jsx import { BrowserRouter as Router } from 'react-router-dom'; function App() { return ( <Router> {/* 路由配置 */} </Router> ); } ``` ##### 3. API 设计哲学上的微调 虽然二者遵循相同的总体设计理念——即通过声明式的语法描述UI应该如何响应不同的路径匹配情况——但是在某些细节方面还是有细微差别。例如对于动态参数解析、嵌套路由支持等方面可能会有不同的表现形式或额外特性加入到 `react-router-dom` 当中去更好地服务于前端开发者的需求[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值