React Router v6 基本使用指南
React 单页应用需要路由机制才能在不刷新网页的情况下导航到不同的视图。这可以通过 React Router 来实现React Router。
如果您不了解 React Router 的工作原理，我建议您先阅读相关资料，然后按照本指南更新到最新版本。React
Router v6 目前仍在beta开发中。这篇博客将带您了解该库即将推出的一些新特性。
1.<BrowserRouter>
首先我们需要导入 `Router` <BrowserRouter>。这是一个使用 React Router 所必需的接口。这里我们使用了一个别名 Router，这样可以简化代码编写。我们在 index.js 文件中导入它，并将其包裹在我们的 `<Router>` 标签内。<App/>
import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<Router>
<App />
</Router>,
rootElement
);
它的语法与 API 非常相似context。这意味着应用组件及其子组件现在可以访问路由 API。
2.<Routes>和<Route>
Routes是一个全新的元素，是对之前组件的升级Switch。它包含相对路由和链接、自动路由排名等功能。
路由有两个主要属性：path一个是 URL 路径，element另一个是当前 URL 与路径匹配时要渲染的组件。
以下示例展示了三个路由组件。Route
<Routes>
<Route path="/" element={<Home />} />
<Route path="/menu" element={<Menu />} />
<Route path="/about" element={<About />}
</Routes>
3.<Link>和<NavLink>
当我们使用简单的<a href="abc.com">Some Link</a>导航方式时，会导致网页刷新。为了避免这种情况，React Router 提供了一个 `<div>`Link元素。`
<div>`Link元素允许用户通过点击或轻触它来导航到另一个页面。
它有一个 `path` 属性，to我们可以在其中指定要导航到的路径。
import React from 'react';
import { Link } from 'react-router-dom';
export function Navbar() {
return (
<nav>
<Link to="/home"> Home </Link>
<Link to="/about"> About </Link>
</nav>
)
}
Link两者NavLink非常相似，唯一的区别在于前者Navlink能够判断链接是否active处于激活状态。这在您想要为激活的链接应用样式时非常有用。
import React from 'react';
import { NavLink } from 'react-router-dom';
export function Navbar() {
return (
<nav>
<NavLink to="/home" activeStyle={{textDecoration:"underline" , color:"red"}}> Home </Link>
<NavLink to="/about" activeStyle={{textDecoration:"underline" , color:"red"}}> About </Link>
</nav>
)
}
4.useNavigate hook
该useNavigate钩子函数允许你以编程方式进行导航。当你需要以命令式方式进行导航时，例如在用户提交表单或点击按钮之后，这非常有用。
import React from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
function App() {
let navigate = useNavigate();
let [error, setError] = React.useState(null);
async function handleSubmit(event) {
event.preventDefault();
let result = await submitForm(event.target);
if (result.error) {
setError(result.error);
} else {
navigate('success');
}
}
return (
<form onSubmit={handleSubmit}>
// ...
</form>
);
}
5.useParams hook
该useParams钩子用于访问 URL 参数。如果您想在电子商务应用中为产品创建单独的产品页面，它将非常有用。
<Route path="/products/:id" element={<ProductPage />} />
在嵌套路由中使用时，它会返回一个包含 URL 中所有参数的对象。以下是一个简单的实现示例，展示了如何使用它useParams来访问 URL 参数。
import React from 'react';
import { useParams } from 'react-router-dom';
import { products } from './data/products';
export function ProductPage() {
const { id } = useParams()
const product = products.find(el => el.id === id)
return (
<li key={product.id}>
<h3>{product.name}</h3>
<p>{product.description}</p>
<p>{product.price}</p>
</li>
);
}
希望这篇博客对你有所帮助。现在，你可以尝试在你的项目中使用最新版本的 React Router。你也可以查阅文档了解更多信息。
如果您喜欢这篇文章，请分享一下，非常感谢！另外，这是我的第一篇博客，欢迎提出任何建议。如果您有任何疑问或问题，请在下方留言。
感谢阅读！
文章来源：https://dev.to/amarjits/basic-guide-to-use-react-router-v6-35do