React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter

我命由我123452026-03-27 15:31

一、BrowserRouter 与 HashRouter

1、基本介绍
（1）BrowserRouter

  1. URL 形式：example.com/path

  2. 使用 HTML5 的 History API（pushState、replaceState）

  3. 需要服务器配置，所有路径都返回 index.html，否则刷新会 404

（2）HashRouter

  1. URL 形式：example.com/#/path

  2. 使用 URL 的 hash（#）部分

  3. 无需服务器配置，hash 变化不会向服务器发请求

2、基本使用
  1. 使用 BrowserRouter
js 复制代码 
import React from "react"; // 引入 React 核心库
import ReactDOM from "react-dom"; // 引入 ReactDOM
import App from "./App"; // 引入 App 组件
import { BrowserRouter } from "react-router-dom";

// 渲染 App 组件到页面
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root"),
);
  1. 使用 HashRouter
js 复制代码 
import React from "react"; // 引入 React 核心库
import ReactDOM from "react-dom"; // 引入 ReactDOM
import App from "./App"; // 引入 App 组件
import { HashRouter } from "react-router-dom";

// 渲染 App 组件到页面
ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>,
    document.getElementById("root"),
);

二、push 模式与 replace 模式

1、基本介绍

  1. push 模式（默认）：在历史栈中添加新记录，可以点击浏览器后退按钮返回上一页

  2. replace 模式：替换当前历史记录，不添加新记录，点击后退不会回到当前页，直接跳到更早的页面

2、replace 模式演示
（1）page
  1. About 组件
js 复制代码 
import React, { Component } from "react";

export default class About extends Component {
    render() {
        return <h3>About Content</h3>;
    }
}
  1. Home 组件
js 复制代码 
import React, { Component } from "react";

export default class Home extends Component {
    render() {
        return <h3>Home Content</h3>;
    }
}
（2）main
  1. App 组件
js 复制代码 
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

export default class App extends Component {
    render() {
        return (
            <div>
                <h2>React Router Demo</h2>
                <div>
                    <Link replace to="/about">About</Link>
                    <Link replace to="/home">Home</Link>
                </div>
                <div>
                    <Route path="/about" component={About} />
                    <Route path="/home" component={Home} />
                </div>
            </div>
        );
    }
}
  1. index.js
js 复制代码 
import React from "react"; // 引入 React 核心库
import ReactDOM from "react-dom"; // 引入 ReactDOM
import App from "./App"; // 引入 App 组件
import { BrowserRouter } from "react-router-dom";

// 渲染 App 组件到页面
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root"),
);

三、编程式导航

1、page
  1. Message 组件
js 复制代码 
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";
import News from "./News";
import Tip from "./Tip";

export default class Message extends Component {
    state = {
        messageArr: [
            { id: "01", title: "消息 1" },
            { id: "02", title: "消息 2" },
            { id: "03", title: "消息 3" },
        ],
    };

    pushParamsShow = (id, title) => {
        this.props.history.push(`/message/detail/${id}/${title}`);
    };

    replaceParamsShow = (id, title) => {
        this.props.history.replace(`/message/detail/${id}/${title}`);
    };

    pushSearchShow = (id, title) => {
        this.props.history.push(`/message/news/?id=${id}&title=${title}`);
    };

    replaceSearchShow = (id, title) => {
        this.props.history.replace(`/message/news/?id=${id}&title=${title}`);
    };

    pushStateShow = (id, title) => {
        this.props.history.push({ pathname: "/message/tip", state: { id, title } });
    };

    replaceStateShow = (id, title) => {
        this.props.history.replace({ pathname: "/message/tip", state: { id, title } });
    };

    back = () => {
        this.props.history.goBack();
    };

    forward = () => {
        this.props.history.goForward();
    };

    go = () => {
        this.props.history.go(2);
    };

    render() {
        const { messageArr } = this.state;
        return (
            <div>
                <h3>传递 params 参数</h3>
                <ul>
                    {messageArr.map((msgObj) => {
                        return (
                            <li key={msgObj.id}>
                                <button onClick={() => this.pushParamsShow(msgObj.id, msgObj.title)}>{msgObj.title}（push）</button>
                                <button onClick={() => this.replaceParamsShow(msgObj.id, msgObj.title)}>{msgObj.title}（replace）</button>
                            </li>
                        );
                    })}
                </ul>
                <Route path="/message/detail/:id/:title" component={Detail} />
                <h3>传递 search 参数</h3>
                <ul>
                    {messageArr.map((msgObj) => {
                        return (
                            <li key={msgObj.id}>
                                <button onClick={() => this.pushSearchShow(msgObj.id, msgObj.title)}>{msgObj.title}（push）</button>
                                <button onClick={() => this.replaceSearchShow(msgObj.id, msgObj.title)}>{msgObj.title}（replace）</button>
                            </li>
                        );
                    })}
                </ul>
                <Route path="/message/news" component={News} />
                <h3>传递 state 参数</h3>
                <ul>
                    {messageArr.map((msgObj) => {
                        return (
                            <li key={msgObj.id}>
                                <button onClick={() => this.pushStateShow(msgObj.id, msgObj.title)}>{msgObj.title}（push）</button>
                                <button onClick={() => this.replaceStateShow(msgObj.id, msgObj.title)}>{msgObj.title}（replace）</button>
                            </li>
                        );
                    })}
                </ul>
                <Route path="/message/tip" component={Tip} />
                <button onClick={this.back}>回退</button>&nbsp;
                <button onClick={this.forward}>前进</button>&nbsp;
                <button onClick={this.go}>go</button>
            </div>
        );
    }
}
  1. Detail 组件
js 复制代码 
import React, { Component } from "react";

export default class Detail extends Component {
    render() {
        const { id, title } = this.props.match.params;
        return (
            <ul>
                <li>id: {id}</li>
                <li>title: {title}</li>
            </ul>
        );
    }
}
  1. News 组件
js 复制代码 
import React, { Component } from "react";
import qs from "qs";

export default class News extends Component {
    render() {
        const { search } = this.props.location;
        const { id, title } = qs.parse(search.slice(1));
        return (
            <ul>
                <li>id: {id}</li>
                <li>title: {title}</li>
            </ul>
        );
    }
}
  1. Tip 组件
js 复制代码 
import React, { Component } from "react";

export default class Tip extends Component {
    render() {
        const { id, title } = this.props.location.state || {};
        return (
            <ul>
                <li>id: {id}</li>
                <li>title: {title}</li>
            </ul>
        );
    }
}
2、main
  1. App 组件
js 复制代码 
import React, { Component } from "react";
import { Route } from "react-router-dom";
import Message from "./pages/Message";

export default class App extends Component {
    render() {
        return (
            <div>
                <Route path="/message" component={Message} />
            </div>
        );
    }
}
  1. index.js
js 复制代码 
import React from "react"; // 引入 React 核心库
import ReactDOM from "react-dom"; // 引入 ReactDOM
import App from "./App"; // 引入 App 组件
import { BrowserRouter } from "react-router-dom";

// 渲染 App 组件到页面
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root"),
);

四、withRouter

1、基本介绍

  1. withRouter 的主要作用是让那些不是通过路由直接渲染的组件，也能访问到路由相关的属性，如 history、location 和 match

  2. 在 React Router 中，只有直接被 Route 渲染的组件，其 props 里会自动获得路由信息

2、演示
  • Header 组件
js 复制代码 
import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class Header extends Component {
    back = () => {
        this.props.history.goBack();
    };

    forward = () => {
        this.props.history.goForward();
    };

    go = () => {
        this.props.history.go(-2);
    };

    render() {
        console.log("Header 组件收到的 props 是", this.props);
        return (
            <div className="page-header">
                <h2>React Router Demo</h2>
                <button onClick={this.back}>回退</button>&nbsp;
                <button onClick={this.forward}>前进</button>&nbsp;
                <button onClick={this.go}>go</button>
            </div>
        );
    }
}

export default withRouter(Header);
相关推荐
2601_962071575 小时前
【Java报错已解决】org.springframework.beans.factory.BeanCreationException
java·开发语言
支支დ5 小时前
VO by Vercel 前端特定优势：为什么它是构建 AI 应用的新范式
前端·人工智能
香芋芋圆6 小时前
AI 冲击内卷之下，普通前端如何破局？WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF6 小时前
【编程笔记】成员函数中两个 const 的区别（const Data &getData() const；）
前端·javascript·笔记
淡海水6 小时前
07-04-并发-ConcurrentBag-T-工作窃取WorkStealing算法
开发语言·算法·c#·bag·concurrent·workstealing
宿6747 小时前
vue3-async
前端·javascript·vue.js
CS_Zero7 小时前
C语言sizeof是函数吗？
c语言·开发语言
YXWik67 小时前
记录前端请求接口在浏览器请求响应的Preview和Response展示的一样的问题
前端
2501_928996227 小时前
GPT-4o换DeepSeek迁移成本多少？中科热备解析API聚合平台技术账本
前端·数据库·人工智能
东风破_7 小时前
从跨域到 WebSocket：前端跨域方案、SSE 与双向实时通信详解
前端·后端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03ZCode 周末送额度活动开启：3 亿 Token 免费领取04历年考研数学一、数学二、数学三真题试卷及答案PDF05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10VSCode+CodeX扩展，无法启动