Route 确切路径和路由路径之间的区别

Oluwafisayo Oluwatayo 2023年1月30日 2022年7月18日
  1. Route 确切路径和路由路径之间的区别
  2. 结论
Route 确切路径和路由路径之间的区别

react router 是一种在 React 中创建多页应用程序的方法;应用时,它会创建允许用户单击将他们带到新页面的链接的功能。

当我们在一个组件中创建两个或多个链接时,事情变得棘手,我们需要即兴发挥。

Route 确切路径和路由路径之间的区别

当我们在一个组件中有两个或多个链接并使用路由路径时,如果我们只想呈现第二个链接,页面将呈现两个链接上的项目。但是当我们使用路由确切路径时,页面只呈现第二个链接中的详细信息。

让我们看看下面的例子。

首先,我们创建了一个新的 React 项目;接下来,我们将导航到终端中的项目文件夹并安装 react router;我们将使用 npm install react-router-dom@5.2.0

然后我们将在我们的 App.js 文件中放入一些代码,如下所示。

代码片段 - App.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" render={
            () => {
              return (<h1>Welcome Home</h1>);
            }
          } />
          <Route path="/about" render={
            () => {
              return (<h1>About</h1>);
            }
          } />

        </div>
      </Router>
    );
  }
}

export default App;

输出:

路线路径

当我们运行应用程序时,我们会在页面上看到 "Welcome Home",但是当我们尝试使用此地址导航到 "about" 页面时,"localhost:3000/about",我们看到页面加载了两条路线,我们同时看到了"Welcome Home""About"

这是因为 React 从 "/" 读取 URL,因为我们没有在代码中另外指定。

但是在 exact path 的帮助下,我们可以指定我们希望 React 读取的内容,因此我们在代码中执行此操作。

代码片段 - App.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path="/" render={
            () => {
              return (<h1>Welcome Home</h1>);
            }
          } />
          <Route exact path="/about" render={
            () => {
              return (<h1>About</h1>);
            }
          } />

        </div>
      </Router>
    );
  }
}

export default App;

输出:

路由确切路径

我们将 exact path 添加到两个组件,并看到当我们转到"About"时,它只呈现"about"页面。

结论

如果没有 exact path 功能,React 开发人员将不断需要为每个链接创建单独的组件;这将导致代码变得混乱,网站渲染会变慢,更不用说这将是一个严格和重复的练习。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

相关文章 - React Router