React Router 用法概览

React Router 用法

React 使得开发者能够轻松地创建交互式的单页应用(SPA),单页应用的一个常见挑战是如何处理页面导航和路由吗,React Router 就是解决这个问题的工具

路由(Router)是 React Router 的核心概念当 URL 匹配某个路由时,React Router 会渲染该路由对应的组件。

React Router 会根据 URL 和路由的匹配规则来决定哪个组件需要渲染。匹配规则支持动态参数、正则匹配等。

并且React Router 允许你在一个路由内部嵌套另一个路由,从而实现更复杂的界面结构。

用法

  1. 导入 BrowserRouter 组件,并将其包裹在应用的根组件外部
js 复制代码
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

BrowserRouter 和 HashRouter

BrowserRouter使用 HTML5 的 History API(如 pushState 和 replaceState)来实现无哈希的干净 URL。类似于常见的 URL,例如:https://example.com/about 每次路径发生变化时,它会使用 History API 修改浏览器的地址栏,而不刷新页面。

HashRouter 使用 URL 的哈希部分(#)进行路由管理,依赖浏览器的 hashChange 事件。URL 包含 # 符号,例如:https://example.com/#/about

HashRouter 把路径存储在 URL 的哈希部分,浏览器不会将哈希部分发送到服务器,因此页面不会刷新。URL 的哈希部分变化时,HashRouter 会拦截这些变化并更新页面。

browserRouter需要后端支持,服务器必须配置将所有请求指向入口文件(index.html);而HashRouter则直接在客户端处理,无需后端支持

  1. 使用Route定义路由
    使用 Route 组件可以定义路由。每个 Route 组件都需要一个 path 属性,表示匹配的 URL 路径,以及一个 element 属性,表示在该路径匹配时需要渲染的组件。
    React Router 允许你根据用户的身份、权限等条件来实现路由守卫和重定向功能。例如,使用 Navigate 组件可以实现页面重定向:
js 复制代码
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/hone" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Navigate to={`/home`}/>}/>
      </Routes>
    </div>
  );
}

当用户访问 / 路径时,Home 组件将被渲染;当访问 /about 路径时,About 组件将被渲染。到其他路由,会被重定向到/home

  1. 嵌套路由
    嵌套路由可以使用 Route 的 children 属性或者在 Route 内部定义子路由来实现
js 复制代码
function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

在这个例子中,/dashboard/settings 路径将渲染 Settings 组件,而 /dashboard 将渲染 Dashboard 组件

  1. 使用参数
    React Router 允许在路由路径中使用动态参数并且可以通过 useParams 钩子获取
js 复制代码
import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

function App() {
  return (
    <Routes>
      <Route path="/user/:id" element={<User />} />
    </Routes>
  );
}

在上面的例子中,/user/:id 路径中的 :id 就是一个动态参数。访问 /user/123 时,User 组件将渲染并显示 User ID: 123。

相关推荐
YongGit2 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士39 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js