React Router 用法概览

React Router 用法

作用：根据url的动态更新操作DOM，实现url到界面的映射
单页应用中，视图在一个页面通过Javascript动态处理，根据不同的 URL 动态更新 DOM，显示不同的视图，而无需重新加载整个页面。单页应用的一个常见挑战是如何处理页面导航和路由，react就是解决这个问题。react-router将 URL 与组件相关联，在不同 URL 路径下渲染相应的 React 组件。

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

用法

1. 导入 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则直接在客户端处理，无需后端支持

2. 使用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

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

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

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

4. 使用参数
   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 主要工作流程

1. 监听
   浏览器本身不提供“监听历史栈操作“的方法，React-Router的history库提供监听url的方法，当 URL 改变时，获取到新的 URL 信息，比如点击前进或后退按钮、修改 URL 等操作。
   let history = createBrowserHistory();
   history.listen(({ location, action }) => {
   // this is called whenever new locations come in
   // action is POP, PUSH, or REPLACE
   });

2. url匹配
   将当前url与定义的Route动态的匹配，并且可以用useParames()提取出对应参数，用于组件间的参数传递.
   route也支持精确匹配和通配符。通配符则可以匹配符合一定模式的多个 URL 路径，例如* 可以匹配任意路径，常用于处理 404 页面等情况
   <Route path=“:Id” element={} />
   ///这个路由可以匹配到 teams/123 or /teams/cupcakes 这样的url
   const { id } = useParams(); // 获取路由中:id参数的值

3. 渲染
   根据匹配过程的执行结果来决定是否渲染关联的组件。在嵌套的路由结构中，组件按照层次结构进行渲染。