ReactRouterDom-v5&v6用法与异同

发布：2024/2/28 20:52:17作者：管理员来源：本站浏览次数：135

简介：

React Router Dom是React.js中用于实现路由功能的常用库。在React应用中，路由可以帮助我们管理页面之间的导航和状态，并实现动态加载组件。本文将深入探讨React Router Dom的两个主要版本：V5和V6，并介绍它们的用法和异同点。

v5用法

React Router Dom的V5版本是在React Router的基础上构建的。它是一个稳定且广泛使用的版本，为React应用提供了强大的路由功能。以下是V5版本的用法示例：

安装React Router Dom：

npm install react-router-dom@5

yarn add react-router-dom@5

导入所需组件：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

在应用中定义路由：

<nav>

<ul>

<li>

</li>

<li>

</li>

</ul>

</nav>

</Router>

在组件中使用路由参数：

import { useParams } from 'react-router-dom';

function User() {

let { id } = useParams();

return <h2>用户ID: {id}</h2>;

}

V5版本的React Router Dom提供了许多强大的功能，如嵌套路由、路由参数、重定向等。但在V6版本中，它们的用法可能有所不同。

v6用法

React Router Dom的V6版本是一个全新的重写版本，旨在提供更简洁和直观的API。以下是V6版本的用法示例：

安装React Router Dom V6：

npm install react-router-dom@next

yarn add react-router-dom@next

导入所需组件：

import { BrowserRouter as Router, Route, Link, Routes, Outlet } from 'react-router-dom';

在应用中定义路由：

<nav>

<ul>

<li>

</li>

<li>

</li>

</ul>

</nav>

</Routes>

</Router>

在组件中使用路由参数：

import { useParams } from 'react-router-dom';

function User() {

let { id } = useParams();

return <h2>用户ID: {id}</h2>;

}

V6版本的React Router Dom引入了一些新的概念，如 Routes 和 Outlet。Routes 用于定义路由集合，而 Outlet 用于在父路由组件

BrowserRouter 与HashRouter

BrowserRouter 和 HashRouter 是 React Router Dom 中两种常用的路由器组件，它们用于在React应用中处理路由。

BrowserRouter：

BrowserRouter使用HTML5的 History API 来实现路由功能。它通过使用history.pushState()和history.replaceState()方法来修改浏览器的URL，而不会引起页面的重新加载。BrowserRouter使用基于浏览器的URL路径来匹配和渲染对应的组件。使用BrowserRouter时，需要将所有的路由规则放置在服务端的路由配置上，以确保在刷新或直接访问某个URL时能够正确加载对应的组件。

HashRouter：

HashRouter使用URL的哈希部分（#）来实现路由功能。它在URL中添加了一个哈希路由器，并通过监听window对象的hashchange事件来响应URL的变化。当URL的哈希部分发生改变时，HashRouter会匹配对应的路由规则并渲染相应的组件。相对于BrowserRouter，HashRouter具有更广泛的兼容性，因为哈希部分的变化不会触发浏览器向服务器发起请求，而是在客户端进行处理。这对于一些需要部署在静态服务器上的应用程序非常有用。

import { BrowserRouter as Router, Route } from 'react-router-dom';

import { HashRouter as Router, Route } from 'react-router-dom';

function App() {

return (

</Router>

);

}

需要注意的是，在使用HashRouter时，URL的哈希部分会被添加到应用的根路径之后，例如：http://example.com/#/about。这种方式可以让应用正确地响应URL的变化并显示对应的组件。

总结：BrowserRouter和HashRouter是React Router Dom中两种常用的路由器组件。BrowserRouter使用HTML5的History API实现路由功能，而HashRouter使用URL的哈希部分实现路由功能。选择使用哪种路由器取决于应用的部署环境和兼容性需求。如果应用部署在一个支持HTML5 History API的服务器上，可以使用BrowserRouter；如果需要更广泛的兼容性，或者应用是一个纯静态网站，可以使用HashRouter。

Router中的重要配置

BrowserRouter与homepage

在React应用的package.json文件中，可以通过设置"homepage"参数来指定应用的基本URL路径。这个基本URL路径会影响React Router中使用的路由匹配规则和导航链接的生成。当设置了"homepage"参数后，React Router的路由匹配规则和导航链接会考虑到该基本URL路径。它们会自动添加基本URL路径作为前缀，以确保路由的正确匹配和导航链接的生成。例如，假设"homepage"参数设置为"/my-app"，以下是使用React Router时的一些示例：

BrowserRouter：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {

return (

<Route path="/" component={Home} /> {/* 匹配的路径为：/my-app/ */}

<Route path="/about" component={About} /> {/* 匹配的路径为：/my-app/about */}

</Router>

);

}

在BrowserRouter中，设置了"homepage"参数后，路由匹配规则中的路径会自动添加基本URL路径作为前缀。

Link组件：

import { Link } from 'react-router-dom';

function Navigation() {

return (

<nav>

<ul>

<li>

<Link to="/">首页</Link> {/* 生成的链接为：/my-app/ */}

</li>

<li>

<Link to="/about">关于</Link> {/* 生成的链接为：/my-app/about */}

</li>

</ul>

</nav>

);

}

在Link组件中，设置了"homepage"参数后，生成的导航链接会自动添加基本URL路径作为前缀。

总结：设置package.json中的"homepage"参数可以指定React应用的基本URL路径。这个基本URL路径会影响React Router中的路由匹配规则和导航链接的生成，确保它们考虑到基本URL路径作为前缀。这在部署React应用到不同的路径下时非常有用，可以保证路由的正确匹配和导航链接的生成。

HashRouter与homepage

在React Router中，HashRouter不受package.json中的"homepage"参数的影响。设置"homepage"参数只会影响BrowserRouter的行为，不会直接影响HashRouter。 HashRouter使用URL的哈希部分（#）来实现路由功能，不依赖于基本URL路径。无论是否设置了"homepage"参数，HashRouter始终使用相对于根目录的哈希部分来匹配路由规则和生成导航链接。例如，假设"homepage"参数设置为"/my-app"，以下是使用HashRouter时的示例：

import { HashRouter as Router, Route } from 'react-router-dom';

function App() {

return (

<Route path="/" component={Home} /> {/* 匹配的路径为：/#/ */}

<Route path="/about" component={About} /> {/* 匹配的路径为：/#/about */}

</Router>

);

}

在HashRouter中，无论"homepage"参数设置为什么，路由的匹配规则和生成的导航链接仍然会使用/#/和/#/about这样的哈希部分路径。

总结： HashRouter不受package.json中的"homepage"参数的影响。无论是否设置了"homepage"参数，HashRouter始终使用相对于根目录的哈希部分来匹配路由规则和生成导航链接。"homepage"参数只会影响BrowserRouter的行为。

其他参数

basename：可以通过在Router组件中设置basename属性来使用basename参数，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {

return (

</Router>

);

}

path：在Route组件中使用path属性来定义路由规则的路径，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {

return (

</Router>

);

}

exact：通过设置exact属性为true，确保只有当URL路径与path参数完全匹配时才进行渲染，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {

return (

</Router>

);

}

strict：设置strict属性为true，以在末尾带有斜杠的URL路径上进行匹配，如下所示：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {

return (

</Router>

);

}

以上示例展示了如何使用这些参数来影响路径的生成和匹配。根据具体需求，可以在相应的组件中设置这些参数来实现所需的路由配置。

引用

https://reactrouter.com/en/main/router-components/browser-router

https://www.npmjs.com/package/react-router-dom

- END -

　数据库：MYSQL参数max_allowed_packet 介绍

react 项目中使用less，以及支持装饰器语法模式配置craco.config.js配置　

ReactRouterDom-v5&v6用法与异同 MessageBox.Show用法 Python 爬虫利器五之 Selenium 的用法 'OFFSET' 附近有语法错误。在 FETCH 语句中选项 NEXT 的用法无效。 C# Dapper基本用法 Func与Action用法委托 C#中Func的用法和Lambda表达式 Auto.js一些高级用法 C#中ref关键字的用法总结 C# 操作符中nameof用法

柏港建站平台

柏港 React

ReactRouterDom-v5&v6用法与异同

柏港为您推荐了一些相关资讯