React 路由器

2025年3月17日 | 阅读 7 分钟

路由是一种根据用户的操作或请求将用户定向到不同页面的过程。ReactJS Router 主要用于开发单页 Web 应用程序。 React Router 用于在应用程序中定义多个路由。当用户在浏览器中键入特定的 URL 时，如果此 URL 路径与路由器文件中的任何“路由”匹配，则用户将被重定向到该特定路由。

React Router 是一个基于 React 构建的标准库系统，用于使用 React Router 包在 React 应用程序中创建路由。它提供浏览器上的同步 URL 以及将显示在网页上的数据。它保持了应用程序的标准结构和行为，主要用于开发单页 Web 应用程序。

React Router 的必要性

React Router 在单页应用程序中显示多个视图方面发挥着重要作用。如果没有 React Router，就不可能在 React 应用程序中显示多个视图。大多数社交媒体网站（如 Facebook、Instagram）都使用 React Router 来渲染多个视图。

React Router 安装

React 包含三个用于路由的不同包。这些是

react-router：它为 React Router 应用程序提供核心路由组件和功能。
react-router-native：它用于移动应用程序。
react-router-dom：它用于 Web 应用程序设计。

不可能直接在您的应用程序中安装 react-router。要使用 react 路由，首先，您需要在您的应用程序中安装 react-router-dom 模块。以下命令用于安装 react router dom。

React Router 中的组件

有两种类型的路由器组件

<BrowserRouter>：它用于处理动态 URL。
<HashRouter>：它用于处理静态请求。

示例

步骤 1：在我们的项目中，我们将在已经存在的App.js的基础上再创建两个组件。

About.js

import React from 'react'
class About extends React.Component {
  render() {
    return <h1>About</h1>
  }
}
export default About

Contact.js

import React from 'react'
class Contact extends React.Component {
  render() {
    return <h1>Contact</h1>
  }
}
export default Contact

App.js

import React from 'react'
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Home</h1>
      </div>
    )
  }
}
export default App

步骤 2：对于路由，打开 index.js 文件并在其中导入所有三个组件文件。在这里，您需要导入行：import { Route, Link, BrowserRouter as Router } from 'react-router-dom'，这有助于我们实现路由。现在，我们的 index.js 文件如下所示。

什么是 Route？

它用于根据指定的路径定义和呈现组件。它将接受组件并呈现以定义应该呈现的内容。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'

const routing = (
  <Router>
    <div>
      <h1>React Router Example</h1>
      <Route path="/" component={App} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'));

步骤 3：打开命令提示符，转到您的项目位置，然后键入npm start。您将获得以下屏幕。

现在，如果您在浏览器中手动输入：localhost:3000/about，您将看到在屏幕上呈现了About组件。

步骤 4：在上面的屏幕中，您可以看到 Home 组件仍然呈现。这是因为主页路径是“/”，关于路径是“/about”，因此您可以观察到两个路径中都存在斜杠，这会呈现这两个组件。要停止此行为，您需要使用 exact 属性。可以在下面的示例中看到它。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'

const routing = (
  <Router>
    <div>
      <h1>React Router Example</h1>
      <Route exact path="/" component={App} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'));

输出

使用 Link 组件添加导航

有时，我们需要在一个页面上需要多个链接。当我们单击任何特定链接时，它应该加载与该路径关联的页面，而无需重新加载网页。为此，我们需要在 index.js 文件中导入 <Link> 组件。

什么是 < Link> 组件？

此组件用于创建链接，这些链接允许在不同的 URLs 上导航并呈现其内容，而无需重新加载网页。

示例

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'

const routing = (
  <Router>
    <div>
      <h1>React Router Example</h1>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Route exact path="/" component={App} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'));

输出

添加 Link 后，您可以看到这些路由已在屏幕上呈现。现在，如果您单击About，您将看到 URL 正在更改，并且呈现了 About 组件。

现在，我们需要向 Link 添加一些样式。这样，当我们单击任何特定链接时，就可以轻松识别哪个 Link 是活动的。要执行此操作，react router 提供了一个新技巧 NavLink 而不是 Link。现在，在 index.js 文件中，将 Link 替换为 Navlink 并添加属性 activeStyle。 activeStyle 属性表示当我们单击 Link 时，它应该具有特定的样式，以便我们可以区分哪个当前处于活动状态。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'

const routing = (
  <Router>
    <div>
      <h1>React Router Example</h1>
      <ul>
        <li>
          <NavLink to="/" exact activeStyle={
             {color:'red'}
          }>Home</NavLink>
        </li>
        <li>
          <NavLink to="/about" exact activeStyle={
             {color:'green'}
          }>About</NavLink>
        </li>
        <li>
          <NavLink to="/contact" exact activeStyle={
             {color:'magenta'}
          }>Contact</NavLink>
        </li>
      </ul>
      <Route exact path="/" component={App} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'));

输出

当我们执行上述程序时，我们将获得以下屏幕，其中我们可以看到 Home 链接的颜色为红色，并且是当前唯一的活动链接。

现在，当我们单击About链接时，它的颜色显示为绿色，这是当前活动链接。

<Link> vs <NavLink>

Link 组件允许在网站上导航不同的路由，而 NavLink 组件用于向活动路由添加样式。

React Router Switch

<Switch> 组件用于仅在匹配路径时呈现组件。否则，它将返回到未找到的组件。

为了理解这一点，首先，我们需要创建一个 notfound 组件。

notfound.js

import React from 'react'
const Notfound = () => <h1>Not found</h1>
export default Notfound

现在，导入组件到 index.js 文件中。可以在下面的代码中看到它。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'
import Notfound from './notfound'

const routing = (
  <Router>
    <div>
      <h1>React Router Example</h1>
      <ul>
        <li>
          <NavLink to="/" exact activeStyle={
             {color:'red'}
          }>Home</NavLink>
        </li>
        <li>
          <NavLink to="/about" exact activeStyle={
             {color:'green'}
          }>About</NavLink>
        </li>
        <li>
          <NavLink to="/contact" exact activeStyle={
             {color:'magenta'}
          }>Contact</NavLink>
        </li>
      </ul>
      <Switch>
         <Route exact path="/" component={App} />
         <Route path="/about" component={About} />
         <Route path="/contact" component={Contact} />
         <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'));

输出

如果我们手动输入错误的路径，它将给出未找到错误。

React Router <Redirect>

<Redirect> 组件用于重定向到我们应用程序中的另一个路由以维护旧的 URL。它可以放置在路由层次结构的任何位置。

React 中的嵌套路由

嵌套路由允许您在应用程序中呈现子路由。可以在下面的示例中理解它。

示例

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'
import Notfound from './notfound'

const routing = (
  <Router>
    <div>
      <h1>React Router Example</h1>
      <ul>
        <li>
          <NavLink to="/" exact activeStyle={
             {color:'red'}
          }>Home</NavLink>
        </li>
        <li>
          <NavLink to="/about" exact activeStyle={
             {color:'green'}
          }>About</NavLink>
        </li>
        <li>
          <NavLink to="/contact" exact activeStyle={
             {color:'magenta'}
          }>Contact</NavLink>
        </li>
      </ul>
      <Switch>
         <Route exact path="/" component={App} />
         <Route path="/about" component={About} />
         <Route path="/contact" component={Contact} />
         <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'));

在 contact.js 文件中，我们需要导入 React Router 组件以实现子路由。

contact.js

import React from 'react'
import { Route, Link } from 'react-router-dom'

const Contacts = ({ match }) => <p>{match.params.id}</p>

class Contact extends React.Component {
  render() {
    const { url } = this.props.match
    return (
      <div>
        <h1>Welcome to Contact Page</h1>
        <strong>Select contact Id</strong>
        <ul>
          <li>
            <Link to="/contact/1">Contacts 1 </Link>
          </li>
          <li>
            <Link to="/contact/2">Contacts 2 </Link>
          </li>
          <li>
            <Link to="/contact/3">Contacts 3 </Link>
          </li>
          <li>
            <Link to="/contact/4">Contacts 4 </Link>
          </li>
        </ul>
        <Route path="/contact/:id" component={Contacts} />
      </div>
    )
  }
}
export default Contact

输出

当我们执行上述程序时，我们将获得以下输出。

单击联系人链接后，我们将获得联系人列表。现在，选择任何联系人，我们将获得相应的输出。可以在下面的示例中显示它。

React Router 的好处

React Router 的好处如下所示

在此，无需手动设置浏览器历史记录。
Link 用于在应用程序中导航内部链接。它类似于锚标记。
它使用 Switch 功能进行渲染。
Router 只需要一个 Single Child 元素。
在此，每个组件都指定在.

下一主题React CSS

← 上一步下一步 →

React 路由器

React Router 的必要性

React Router 安装

React Router 中的组件

示例

什么是 Route？

使用 Link 组件添加导航

什么是 < Link> 组件？

<Link> vs <NavLink>

React Router Switch

React Router <Redirect>

React 中的嵌套路由

React Router 的好处

联系信息

关注我们

教程

面试题

在线编译器

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 路由器

React Router 的必要性

React Router 安装

React Router 中的组件

示例

什么是 Route？

使用 Link 组件添加导航

什么是 < Link> 组件？

<Link> vs <NavLink>

React Router Switch

React Router <Redirect>

React 中的嵌套路由

React Router 的好处

相关帖子

React Flux 概念

React vs Vue

React 事件

React 构造函数

React 状态 vs Props

create-react-app

React 功能

React 组件

ReactJS vs ReactNative

React Flux vs MVC

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器