首页 › JavaScript › React 教程

路由与实战

React 教程 · 第 8 章 · 7 次浏览

React 生态最常用的路由是 React Router。SPA 里地址和组件对应，切换地址组件跟着换。

React Router 基础

  1. npm install react-router-dom
  2. BrowserRouter 包住应用
  3. Routes + Route 定义路径和组件
  4. Link 或 useNavigate 跳转
  5. useParams 取动态参数，useNavigate 编程式跳转

实战：一个简单页面

三个页面（首页/关于/用户详情）+ 顶部导航，点击切换，刷新保持地址。

代码示例

import { BrowserRouter, Routes, Route, Link, useParams } from "react-router-dom";

function Home() { return <h2>首页</h2>; }
function About() { return <h2>关于</h2>; }
function User() {
    const { id } = useParams();
    return <h2>用户详情：{id}</h2>;
}

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">首页</Link> |{" "}
                <Link to="/about">关于</Link> |{" "}
                <Link to="/user/123">用户 123</Link>
            </nav>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/user/:id" element={<User />} />
            </Routes>
        </BrowserRouter>
    );
}
📚 JavaScript 语法速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量（可重新赋值）
const y = 2;声明常量（不可重新赋值）
var 已过时旧式变量声明，建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML（慎用，防 XSS）
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出（调试）
setTimeout(fn, 1000)延迟执行（毫秒）
window.location.href当前页面地址（可赋值跳转）
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖
📖 延伸阅读