Route 确切路径和路由路径之间的区别
react router
是一种在 React 中创建多页应用程序的方法;应用时,它会创建允许用户单击将他们带到新页面的链接的功能。
当我们在一个组件中创建两个或多个链接时,事情变得棘手,我们需要即兴发挥。
Route 确切路径和路由路径之间的区别
当我们在一个组件中有两个或多个链接并使用路由路径
时,如果我们只想呈现第二个链接,页面将呈现两个链接上的项目。但是当我们使用路由确切路径
时,页面只呈现第二个链接中的详细信息。
让我们看看下面的例子。
首先,我们创建了一个新的 React 项目;接下来,我们将导航到终端中的项目文件夹并安装 react router
;我们将使用 npm install react-router-dom@5.2.0
。
然后我们将在我们的 App.js
文件中放入一些代码,如下所示。
代码片段 - App.js
:
import './App.css';
import React, {Component} from 'react';
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 './App.css';
import React, {Component} from 'react';
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