首页 React

React Router 是一个用于在 React 应用中实现动态路由的强大库。它使得单页应用（SPA）能够拥有多个视图，并且可以根据 URL 的变化来显示不同的内容，而无需重新加载整个页面。
安装库： npm install react-router-dom

# 核心概念

  1. BrowserRouter
    • BrowserRouter 使用 HTML5 提供的 History API 来保持 UI 和 URL 同步。
    • HashRouter 则使用 URL 的 hash 部分（即 # 后面的内容），适用于不支持 HTML5 History API 的旧浏览器。
  2. Routes 和 Route
    • Routes 是一个容器组件，用于包裹多个 Route 组件。
    • Route 组件用于定义路由规则，包括路径、组件和渲染条件。
  3. Link 和 NavLink
    • Link 组件用于创建链接，点击后导航到指定路径。
    • NavLink 组件类似于 Link ，但可以添加一些样式，比如添加类名或改变样式。
  4. Navigate
    • 可以编程式地导航到指定路径。它可以替换当前历史记录条目或添加一个新的条目，取决于是否设置了 replace 属性。
  5. useNavigate Hook
    • useNavigate 是一个 Hook ，用于在组件中获取导航函数。
  6. useMatch Hook
    • useMatch 是一个 Hook ，用于在组件中获取当前匹配的路由信息。没有匹配的路由时， useMatch 返回 null 。

# 示例代码

  1. 基本使用
    这里的代码是一个简单的 React 应用，它使用 BrowserRouter 和 Routes 来定义路由，并使用 Link 和 Route 来创建链接和路由规则。点击 Link 可以跳转到下面定义的三个页面。
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/notes">Notes</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>
        {/* 定义路由 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/notes" element={<Notes />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}
function Home() {
  return <h2>Home</h2>;
}
function Notes() {
  return <h2>Notes</h2>;
}
function About() {
  return <h2>About</h2>;
}
  1. 编程式导航
    使用 useNavigate Hook，可以在组件中获取导航函数，并使用它来导航到指定路径。
import { useNavigate } from 'react-router-dom';
function LoginButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => {
      // 登录逻辑...
      navigate('/dashboard'); // 导航到仪表盘
    }}>
      Go to Dashboard
    </button>
  );
}
  1. 路由参数
    处理路由参数，即在路由路径中使用动态参数。
import { useParams } from 'react-router-dom';
function NoteDetail() {
  let id = useParams().id;
  return <h3>Note ID: {id}</h3>;
}
// 在父组件中定义路由
<Routes>
  <Route path="/notes/:id" element={<NoteDetail />} />
</Routes>
当然这里也可以使用 useMatch Hook 来获取当前匹配的路由信息，比如获取当前匹配的路由的参数。
路由如果匹配成功， useMatch 会返回一个对象，否则返回 null 。
const match = useMatch('/anecdotes/:id')
  const anecdote = match
    ? anecdotes.find(anecdote => anecdote.id === Number(match.params.id))
    : null
 
 更新于   阅读次数  次