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