迹忆客 专注技术分享

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

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

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

让我们看看下面的例子。

首先，我们创建了一个新的 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 开发人员将不断需要为每个链接创建单独的组件；这将导致代码变得混乱，网站渲染会变慢，更不用说这将是一个严格和重复的练习。