柠檬小窝

外观

本页目录

React 路由 - 实现单页应用的导航 ​

什么是 React 路由？ ​

React 路由是指在 React 应用中实现页面之间导航的技术。它允许我们在单页应用中切换不同的页面视图，而无需重新加载整个页面。相比传统多页应用，单页应用（Single Page Application，SPA）在用户体验和性能方面有很大的优势。

在传统多页应用中，每次用户切换页面都会导致整个页面的重新加载，这会增加服务器负担并且造成较长的加载时间。而在单页应用中，整个应用只加载一次，之后的页面切换是在客户端通过 JavaScript 控制的，只更新页面的部分内容，从而实现快速、流畅的导航体验。

React Router 的基本概念 ​

1. 路由 ​

路由是 React Router 中的核心概念之一。它表示一个特定的 URL 路径和对应的页面组件。当用户访问该路径时，React Router 会渲染对应的页面组件。

React Router 使用 <Route> 组件来定义路由，通过 path 属性指定 URL 路径，通过 component 属性指定对应的页面组件。

2. 嵌套路由 ​

嵌套路由是指在一个页面组件中嵌套另一个页面组件，并且这些页面组件具有各自的 URL 路径。

React Router 允许我们在一个页面组件中使用嵌套的 <Route> 组件，从而实现页面之间的嵌套导航。

3. 路由参数 ​

路由参数允许我们在 URL 路径中传递参数，并将参数传递给页面组件进行处理。例如，我们可以通过路由参数在 URL 中传递一个特定的 ID，然后在页面组件中根据 ID 加载对应的数据。

React Router 使用 :paramName 的语法来定义路由参数，参数值可以通过 match.params 属性在页面组件中获取。

4. 路由链接 ​

路由链接是用于在页面中生成导航链接的组件。它允许用户点击链接来切换不同的页面视图，而无需进行页面的完全刷新。

React Router 提供了 <Link> 组件来创建路由链接，通过 to 属性指定链接的目标 URL。

5. 编程式导航 ​

除了使用路由链接进行页面导航外，还可以通过编程式导航的方式实现页面切换。编程式导航允许我们在组件中使用 JavaScript 来手动触发页面的切换。

React Router 提供了 history 对象来管理导航历史记录，可以使用 push 方法将新的 URL 添加到历史记录中，从而实现页面切换。

安装 React Router ​

要开始使用 React Router，首先需要在项目中安装 React Router 的依赖。可以使用 npm 或 yarn 进行安装：

bash
npm install react-router-dom

或

bash
yarn add react-router-dom

使用 React Router ​

一旦安装了 React Router 的依赖，我们就可以在项目中开始使用它了。以下是使用 React Router 实现导航的基本步骤：

1. 创建路由组件 ​

首先，我们需要创建几个页面组件，它们将用于显示不同的页面视图。在 React 中，每个页面都是一个独立的组件，可以使用函数组件或类组件来定义。

jsx
// Home.js
import React from 'react'

const Home = () => {
  return <h1>Home Page</h1>
}

export default Home
jsx
// About.js
import React from 'react'

const About = () => {
  return <h1>About Page</h1>
}

export default About
jsx
// Contact.js
import React from 'react'

const Contact = () => {
  return <h1>Contact Page</h1>
}

export default Contact

2. 定义路由 ​

接下来，我们需要在应用中定义路由。可以在顶层组件（通常是 App.js）中使用 <Route> 组件来定义路由。

jsx
// App.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Contact from './Contact'

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  )
}

export default App

在上面的例子中，我们使用了 <Link> 组件来创建导航链接，分别链接到 Home、About 和 Contact 页面。然后使用 <Route> 组件来定义路由，指定 URL 路径和对应的页面组件。

在 <Route> 组件中，我们使用 path 属性来指定 URL 路径，使用 component 属性来指定对应的页面组件。exact 属性用于确保只有在路径完

全匹配时才渲染对应的组件。

3. 渲染页面 ​

最后，在顶层组件中渲染 <Route> 组件，从而实现页面导航。

jsx
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

嵌套路由 ​

有时候，我们希望在一个页面中显示其他页面的内容，这就需要使用嵌套路由。React Router 允许我们在一个页面组件中定义嵌套的 <Route> 组件。

jsx
// App.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Contact from './Contact'
import SubPage from './SubPage'

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/subpage" component={SubPage} />
      </div>
    </Router>
  )
}

export default App

在上面的例子中，我们新增了一个名为 SubPage 的页面组件，并在 App 组件中定义了一个嵌套路由。当用户访问 /subpage 路径时，SubPage 组件会嵌套在 App 组件中显示。

jsx
// SubPage.js
import React from 'react'

const SubPage = () => {
  return <h2>Sub Page</h2>
}

export default SubPage

路由参数 ​

在实际开发中，我们经常需要从 URL 中获取参数来加载不同的数据或进行页面的定向。React Router 允许我们在 URL 路径中定义参数，并将参数传递给页面组件。

jsx
// App.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Contact from './Contact'
import UserProfile from './UserProfile'

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/user/:id" component={UserProfile} />
      </div>
    </Router>
  )
}

export default App

在上面的例子中，我们新增了一个名为 UserProfile 的页面组件，并在 App 组件中定义了一个带有参数的路由。/:id 表示这是一个路由参数，我们可以通过 match.params.id 在 UserProfile 组件中获取传递的参数。

jsx
// UserProfile.js
import React from 'react'

const UserProfile = ({ match }) => {
  return <h2>User Profile: {match.params.id}</h2>
}

export default UserProfile

路由链接和导航 ​

React Router 提供了 <Link> 组件和编程式导航来实现页面之间的导航。

jsx
// App.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Contact from './Contact'
import UserProfile from './UserProfile'

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/user/:id" component={UserProfile} />
      </div>
    </Router>
  )
}

export default App

在上面的例子中，使用 <Link> 组件来创建导航链接，从而实现页面之间的切换。点击链接后，React Router 会自动更新 URL 并渲染对应的页面组件。

如果希望在某个事件触发后实现页面导航，可以使用编程式导航。

jsx
// UserProfile.js
import React from 'react'

const UserProfile = ({ match, history }) => {
  const handleNavigate = () => {
    history.push('/about')
  }

  return (
    <div>
      <h2>User Profile: {match.params.id}</h2>
      <button onClick={handleNavigate}>Go to About</button>
    </div>
  )
}

export default UserProfile

在上面的例子中，在 UserProfile 组件中定义了一个按钮，当用户点击按钮时，会触发 handleNavigate 函数，通过 history.push() 方法实现页面导航。编程式导航允许在事件触发后进行页面切换，从而实现更灵活的导航控制。

Copyright © 2023-present lemon

lemon's personal blog.

Copyright © 2023-present lemon/lining