React 中的 BrowserRouter

2025年03月17日 | 阅读 9 分钟

React Router 是 React 中用于路由的标准库。它能够实现在 React 应用程序中不同组件之间的视图导航，允许更改浏览器 URL，并使 UI 与 URL 保持同步。

为了理解 React Router 的工作原理，让我们创建一个简单的 React 应用程序。该应用程序将包含 Home、About 和 Contact 组件。我们将使用 React Router 在这些组件之间进行导航。

npx create-react-app

您的开发环境已准备就绪。现在，让我们在应用程序中安装 React Router。

React Router：可以通过 npm 在您的 React 应用程序中安装 React Router。请遵循以下步骤在您的 React 应用程序中设置 Router：

步骤 1：CD 进入您的项目目录，例如，java。

步骤 2：使用以下命令安装 React Router

npm install - -save react-router-dom

安装 react-router-dom 后，将其组件添加到您的 React 应用程序中。

添加 React Router 组件

React Router 的主要组件是

BrowserRouter：BrowserRouter 是一个路由器实现，它使用 HTML5 历史 API（pushstate、replacestate 和 popstate 事件）来保持您的 UI 与 URL 同步。它是用于存储所有其他组件的父组件。
Route：这是 v6 中引入的一个新组件，也是该组件的升级版。Switch Over Routes 的主要优点是

路由不是按顺序遍历，而是根据最佳匹配进行选择。

Route：Route 是一个有条件显示的组件，当其路径与当前 URL 匹配时提供 UI。
Links：Links 组件为不同的路由创建链接并实现应用程序内的导航。它的作用类似于 HTML 的锚标记。

要将 React Router 组件添加到您的应用程序中，请在您使用的编辑器中打开项目目录，然后转到 app.js 文件。现在，将以下代码添加到 app.js。

import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} 
from 'react-router-dom';

注意：BrowserRouter 的别名为 Router。

使用 React Router：要使用 React Router，我们首先在 React 应用程序中创建一些组件。在您的项目目录中，在 src 文件夹内创建一个名为 components 的文件夹，然后在 components 文件夹中添加 3 个名为 home.js、about.js 和 contact.js 的文件。

让我们向我们的 3 个组件添加一些代码

Home.js

import React from 'react';
 
function Home (){
    return <h1>Welcome to the world of jAVAtPOINT!</h1>
}
 
export default Home;

About.js

import React from 'react';
function About () {
    return <div>
        <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2>
   Read more about us at :
        <a href="https://www.javatpoint.in/about/">
            https://www.javatpoint.in/about/
        </a>
    </div>
}
export default About;

Contact.js

import React from 'react';
function Contact (){
 return <address>
            You can find us here:<br />
Javatpoint<br />
G-13, second floor, Sector -3 Noida<br />
Noida, Uttar Pradesh (201305)
        </address>
}
export default Contact;

现在，让我们将 React Router 组件包含在应用程序中

BrowserRouter：将别名为 router 的 BrowserRouter 添加到您的 app.js 文件中，以包装所有其他组件。BrowserRouter 是一个父组件，只能有一个子组件。

class App extends Component {
  render() {
    return (
       <Router>
           <div className="App">
           </div>
       </Router>
   );
  }
}

Links：现在让我们创建组件的链接。Link 组件使用 props 来描述链接应导航到的位置。

<div className="App">
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About Us</Link>
      </li>
      <li>
        <Link to="/contact">Contact Us</Link>
      </li>
    </ul>
</div>

现在，在本地主机上运行您的应用程序，然后单击创建的链接。您会注意到 URL 根据 Link 组件的值发生了变化。

Route：Route 组件将帮助我们建立组件 UI 和 URL 之间的链接。要将路由包含在应用程序中，请将以下代码添加到您的 app.js。

<Route exact path='/' element={< Home />}></Route>
<Route exact path='/about' element={< About />}></Route>
<Route exact path='/contact' element={< Contact />}></Route>

组件现在已连接，单击任何链接都将渲染相应的组件。现在让我们尝试理解与根组件关联的 props。

Exact：这会精确匹配 URL。例如，exact path='/about' 将仅当路径完全匹配时才渲染组件，但如果从语法中删除它，即使结构是 /about /10，UI 仍将渲染。
Path：Path 指定我们分配给组件的路径名。
Element 指的是如果路径匹配，将渲染的组件。

注意：默认情况下，路由是包含性的，这意味着多个路由组件可以匹配一个 URL 路径并同时渲染。如果我们想渲染单个组件，我们需要在这里使用 Routes。

Routes：要读取单个组件，请将所有路由包装在 Routes 组件中。

<Routes>
    <Route exact path='/' element={< Home />}></Route>
    <Route exact path='/about' element={< About />}></Route>
    <Route exact path='/contact' element={< Contact />}></Route>
</Routes>

Switch 会在多个路由之间进行分组，遍历它们并找到第一个匹配路径的路由。因此，将渲染路径的相应组件。

这是我们添加所有组件后的完整源代码

import React, { Component } from 'react';
import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom';
import Home from './component/home';
import Contact from './component/contact';
import About from './component/about';
import './App.css';
 
class App extends Component {
  render() {
    return (
       <Router>
           <div className="App">
            <ul className="App-header">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About Us</Link>
              </li>
              <li>
                <Link to="/contact">Contact Us</Link>
              </li>
            </ul>
           <Routes>
                 <Route exact path='/' element={< Home />}></Route>
                 <Route exact path='/about' element={< About />}></Route>
                 <Route exact path='/contact' element={< Contact />}></Route>
          </Routes>
          </div>
       </Router>
   );
  }
}
export default App;

现在，您可以单击链接并在不同组件之间导航。React Router 使您的应用程序 UI 与 URL 保持同步。

最后，我们使用 React Router 成功实现了 React 应用程序中的导航。

一个使用 HTML5 历史 API（pushstate、replacestate 和 popstate 事件）来保持 UI 与 URL 同步的 <router>。

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App />
</BrowserRouter>

basename: string

所有位置的基础 URL。如果您的应用程序是从服务器上的子目录提供的，您将希望将其设置为该子目录。格式正确的 basename 必须包含前导斜杠，但不能包含尾随斜杠。

<BrowserRouter basename="/calendar">
    <Link to="/today"/> // renders <a href="/calendar/today">
    <Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
    ...
</BrowserRouter>

getUserConfirmation: func

一个用于确认导航的函数。默认为使用 window.confirm。

<BrowserRouter
  getUserConfirmation={(message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

forceRefresh: bool

如果为 true，Router 将在页面导航时使用全页刷新。您可能希望使用此选项来模仿传统服务器渲染应用程序在页面导航之间的行为。

keyLength: number

location.Key 的长度。默认为 6。

children: node- 要渲染的子元素。

注意：在 React 中，您必须使用单个子元素，因为 render 方法不能返回多个元素。如果您需要多个元素，可以尝试将它们包装在额外的 <div> 或 <React.Fragment> 中。

<hash router>

一个使用 URL 的哈希部分（即 window.location.hash）来保持 UI 与 URL 同步的 <router>。

注意：哈希不支持 history location.Key 或 location.State。在之前的版本中，我们尝试减少行为，但存在我们无法解决的边缘情况。任何需要此行为的代码或插件都将无法正常工作。

由于此技术旨在仅支持较旧的浏览器，因此我们鼓励您配置服务器以使用 <BrowserHistory>。

<HashRouter
  basename={optionalString}
  getUserConfirmation={optionalFunc}
  hashType={optionalString}
>
  <App />
</HashRouter>

basename: string

所有位置的基础 URL。格式正确的 basename 应包含前导斜杠，但不能包含尾随斜杠。

<HashRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">

getUserConfirmation: func

一个用于确认导航的函数。默认为使用 window.confirm。

<HashRouter
  getUserConfirmation={(message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

hashType: string

用于 **window.location.hash** 的编码。可用值是

"slash" - 创建的哈希如 #/ 和 #/sunshine/lollipops
"noslash" - # 和 #sunshine/lollipops 。如哈希创建
"hashbang" - 创建 “可抓取的 ajax” （谷歌已弃用）的哈希，如 #!/ 和 #!/sunshine/lollipops

默认为 "slash"。

children: node

要渲染的单个子元素。

< Link>

提供声明式、可访问的应用程序导航。

to: string

链接位置的字符串表示，通过组合 location 的 pathname、search 和 hash 属性来创建。

一个可以包含以下任何属性的对象

pathname：表示要链接到的路径的字符串。
find：查询参数的字符串表示。
hash: 要放在 URL 中的哈希，例如 #A-hash。
state：要保留的状态。

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

to: func

一个函数，其中当前位置作为参数传递，该函数必须返回位置表示（字符串或对象）。

<Link to={location => ({ ...location, pathname: "/courses" })} />
<Link to={location => `${location.pathname}?sort=name`} />

replace: bool

如果为 true，则单击 Link 将替换当前条目而不是添加新条目

entry to the history stack.
<replace="/course" from link />

internal ref: func

从 React Router 5.1 开始，如果您使用的是 React 16，您将不需要此 prop，因为我们已将 ref 转发给底层 <a>。请使用普通 ref。

允许访问组件的内置 ref。

<Link
  to="/"
  innerRef={node => {
    // `node` refers to the mounted DOM element
    // or null when unmounted
  }}
/>

innerRef: RefObject

从 React Router 5.1 开始，如果您使用的是 React 16，您将不需要此 prop，因为我们已将 ref 转发给底层 <a>。请使用普通 ref。

使用 React.createRef 获取组件的底层 ref。

let anchorRef = React.createRef()
<Link to="/" innerRef={anchorRef} />

component: React.Component

如果您想利用自己的导航组件，可以通过 component prop 来实现。

const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => {
  return (
    <a ref={ref} {...props} onClick={handleClick}>? {props.children}</a>
  )
})
<Link to="/" component={FancyLink} />

您还可以传递您希望在 <a> 标签上使用的 props，例如 title、id、className 等。

<NavLink>

Link 的一个特殊版本，如果它匹配现有 URL，则会向渲染的元素添加样式属性。

className: string | func

className 可以是字符串，也可以是返回字符串的函数。如果使用函数 className，则会将链接的激活状态作为参数传递。如果您只想为非活动链接应用 className，这会很有帮助。

<NavLink
  to="/faq"
  className={isActive =>
    "nav-link" + (!isActive ? " unselected" : "")
  }
>

常见问题

</NavLink>

在 React Router v6 中，activeClassName 将被移除，您应该使用函数 className 来为活动或非活动的 NavLink 组件应用 classname。

ActiveClassName: String

当元素处于活动状态时要赋予它的类。默认给出的类是 active。它将与 classname prop 合并。

<NavLink to="/faq" activeClassName="selected">
</NavLink>

style: object | func

style 可以是 React.CSSProperties 对象，也可以是返回样式对象的函数。如果使用函数 style，则会将链接的激活状态作为参数传递。

<NavLink
  to="/faq"
  style={isActive => ({
    color: isActive ? "green" : "blue"
  })}
>
  </NavLink>

在 React Router v6 中，活动样式将被移除，您必须使用函数 style 来为活动或非活动的 NavLink 组件应用内联样式。

Active Style: Object

当元素处于活动状态时应用的样式。

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}

exact: bool

当为 true 时，活动类/样式仅在位置完全匹配时应用。

<NavLink exact to="/profile">
  Profile
</NavLink>

strict: bool

如果为 true，则在确定位置是否与当前 URL 匹配时将考虑位置的 pathname 上的尾随斜杠。有关更多详细信息，请参阅 <route hardening> 文档。

<NavLink strict to="/events/">
  Events
</NavLink>

isActive: func

一个用于添加附加逻辑以确定 Link 是否处于活动状态的函数。当您需要比验证 Link 的 pathname 是否与当前 URL 的 pathname 匹配更多的操作时，应使用此选项。

<NavLink
  to="/events/123"
  isActive={(match, location) => {
    if (!match) {
      return false;
    }
    // only consider an event active if its event id is an odd number
    const eventID = parseInt(match.params.eventID);
    return !isNaN(eventID) && eventID % 2 === 1;
  }}
>
  Event 123
</NavLink>

location: object

isActive 与当前历史位置（通常是当前浏览器 URL）进行比较。

aria-current: string

在活动 Link 上使用的 aria-current 属性的值。可用值是

"page" - 用于指示一组分页链接中的链接
"Steps" - 用于指示基于步骤的过程的步骤指示器中的链接
"location" - 用于指示在流程图中可视突出显示的当前组件的图像
"date" - 用于在日历中指示当前日期
"time" - 用于在时间表中指示当前时间
"true" - 用于指示 NavLink 是否处于活动状态
"false" - 用于防止辅助技术对当前 Link 做出反应（一种用例是防止页面上出现多个 aria-current 标签）

下一个话题React vs. Svelte

← 上一个下一个 →

React 中的 BrowserRouter

npx create-react-app

添加 React Router 组件

注意：BrowserRouter 的别名为 Router。

Home.js

About.js

Contact.js

注意：默认情况下，路由是包含性的，这意味着多个路由组件可以匹配一个 URL 路径并同时渲染。如果我们想渲染单个组件，我们需要在这里使用 Routes。

basename: string

getUserConfirmation: func

<hash router>

注意：哈希不支持 history location.Key 或 location.State。在之前的版本中，我们尝试减少行为，但存在我们无法解决的边缘情况。任何需要此行为的代码或插件都将无法正常工作。

children: node

to: func

replace: bool

internal ref: func

component: React.Component

<NavLink>

className: string | func

常见问题

ActiveClassName: String

style: object | func

Active Style: Object

exact: bool

strict: bool

isActive: func

location: object

aria-current: string

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 中的 BrowserRouter

npx create-react-app

添加 React Router 组件

注意：BrowserRouter 的别名为 Router。

Home.js

About.js

Contact.js

注意：默认情况下，路由是包含性的，这意味着多个路由组件可以匹配一个 URL 路径并同时渲染。如果我们想渲染单个组件，我们需要在这里使用 Routes。

basename: string

getUserConfirmation: func

<hash router>

注意：哈希不支持 history location.Key 或 location.State。在之前的版本中，我们尝试减少行为，但存在我们无法解决的边缘情况。任何需要此行为的代码或插件都将无法正常工作。

children: node

to: func

replace: bool

internal ref: func

component: React.Component

<NavLink>

className: string | func

常见问题

ActiveClassName: String

style: object | func

Active Style: Object

exact: bool

strict: bool

isActive: func

location: object

aria-current: string

相关帖子

从零到英雄的完整 React JS 让你被录用

ReactJS useEffect Hook

React 中的条件 CSS

将 ejs 转换为 React

React 开发人员薪水

函数式构造函数

React-Paginate

ReactJS 架构

React 中的单元测试

React 中什么是 Dom

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器