React Router 用法详细介绍

React Router 用法

React 使得开发者能够轻松地创建交互式的单页应用（SPA），单页应用的一个常见挑战是如何处理页面导航和路由吗，React Router 就是解决这个问题的工具

路由（Router）是 React Router 的核心概念当 URL 匹配某个路由时，React Router 会渲染该路由对应的组件。
React Router 会根据 URL 和路由的匹配规则来决定哪个组件需要渲染。匹配规则支持动态参数、正则匹配等。
并且React Router 允许你在一个路由内部嵌套另一个路由，从而实现更复杂的界面结构。

用法

导入 BrowserRouter 组件，并将其包裹在应用的根组件外部

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

BrowserRouter 和 HashRouter
BrowserRouter使用 HTML5 的 History API（如 pushState 和 replaceState）来实现无哈希的干净 URL。类似于常见的 URL，例如：https://example.com/about 每次路径发生变化时，它会使用 History API 修改浏览器的地址栏，而不刷新页面。
HashRouter 使用 URL 的哈希部分（#）进行路由管理，依赖浏览器的 hashChange 事件。URL 包含 # 符号，例如：https://example.com/#/about
HashRouter 把路径存储在 URL 的哈希部分，浏览器不会将哈希部分发送到服务器，因此页面不会刷新。URL 的哈希部分变化时，HashRouter 会拦截这些变化并更新页面。
browserRouter需要后端支持，服务器必须配置将所有请求指向入口文件(index.html);而HashRouter则直接在客户端处理，无需后端支持

使用Route定义路由

使用 Route 组件可以定义路由。每个 Route 组件都需要一个 path 属性，表示匹配的 URL 路径，以及一个 element 属性，表示在该路径匹配时需要渲染的组件。
React Router 允许你根据用户的身份、权限等条件来实现路由守卫和重定向功能。例如，使用 Navigate 组件可以实现页面重定向：

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  return (
    <div>
      <Routes>
        <Route path="/hone" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Navigate to={`/home`}/>}/>
      </Routes>
    </div>
  );
}

当用户访问 / 路径时，Home 组件将被渲染；当访问 /about 路径时，About 组件将被渲染。到其他路由，会被重定向到/home

嵌套路由

嵌套路由可以使用 Route 的 children 属性或者在 Route 内部定义子路由来实现

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

在这个例子中，/dashboard/settings 路径将渲染 Settings 组件，而 /dashboard 将渲染 Dashboard 组件

使用参数

React Router 允许在路由路径中使用动态参数并且可以通过 useParams 钩子获取

import React from 'react';
import { useParams } from 'react-router-dom';
function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}
function App() {
  return (
    <Routes>
      <Route path="/user/:id" element={<User />} />
    </Routes>
  );
}

在上面的例子中，/user/:id 路径中的 :id 就是一个动态参数。访问 /user/123 时，User 组件将渲染并显示 User ID: 123。

到此这篇关于React Router 用法概览的文章就介绍到这了,更多相关React Router 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论