React07-路由管理器react-router

react-router 是一个流行的用于 React 应用程序路由的库。它使我们能够轻松定义应用程序的路由，并将它们映射到特定的组件，这样可以很容易地创建复杂的单页面应用，并管理应用程序的不同视图。

react-router 是基于 React 构建的，因此与其他 React 库和工具集成得很好。它在许多 React 应用程序中广泛使用，并被认为是 React 中最佳实践的路由。

一、react-router安装和简介

1. react-router安装

使用 npm 或?yarn 安装 react-router-dom。

npm install --save react-router-dom

yarn add react-router-dom

2. react-router-dom 简介

react-router-dom 是 react-router 的一种实现方案，主要应用于网页端应用，它提供了一些常用的组件进行路由管理。

(1) Router 类组件

• BrowserRouter：history 模式下的路由。
• HashRouter：hash 模式下的路由。

(2) Route?组件

Route 是一个路由配置组件。

(3) Link 组件

Link 类似于 a 标签，可以用于路由跳转。

(4)?useNavigate Hook

useNavigate 是一个钩子函数，可以用于路由跳转。

二、react-router-dom 基本使用

1. 引入 react-router-dom

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

这里的 BrowserRouter as Router 相当于给 BrowserRouter 起了一个别名叫 Router。Routes 组件用于包裹 Route 组件，Route 组件的父组件必须是 Routes。

2. 简单使用

使用 BrowserRouter 组件包裹 Routes 组件，再用 Routes 组件包裹 Route 组件，在 Route 组件中定义路由信息，就实现了一个简单的 react-router 场景。

Route 组件有 path 和 element 两个属性，path 属性代表路由路径，element 属性代表要渲染的组件。

index.js

import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

app.js

import './App.css';
import { Routes, Route} from "react-router-dom";
import Home from "./views/Home";
import About from "./views/About";
import Error from "./views/Error";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="*" element={<Error/>}/>
      </Routes>
    </div>
  );
}

export default App;

在上面的案例中，我们定义了一个根路由，指向 Home 页面。还定义一个指定路径路由 /about，指向 About 页面，表示当我们在浏览器地址栏中的页面地址后加上 /about 时，会跳转到 About 页面。

又定义了一个通用路由，指向 Error 页面，path="*" 表示如果浏览器地址栏中的页面地址不是以上定义的2种路由（即其他路由地址）时，就会跳转到 Error 页面。

注意：BrowserRouter 组件最好放在最顶层所有组件之外，这样能确保内部组件使用 Link 做路由跳转时不出错。

3. 路由跳转

跳转路由时，如果路由路径是 / 开头的是绝对路由，否则是相对路由，即相对于当前 URL进行改变。

(1) Link 组件

Link 组件只能在 Router 组件的内部使用，to 属性代表要跳转的路由地址。

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

<Link to="/about">To About</Link>

(2) NavLink 组件

NavLink 组件和 Link 组件的功能是一致的，区别在于 NavLink 组件可以判断其 to 属性是否是当前匹配到的路由。
NavLink组件的 style 属性或 className 属性可以接收一个函数，函数接收一个含有 isActive 字段的对象为参数，可根据该参数调整样式。

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

<NavLink to="/about" style={({ isActive }) => ( {color: isActive ? "red" : "black"} )}>To About</NavLink>

(3)?useNavigate Hook

使用 useNavigate 钩子函数，可以在 js 代码中实现路由跳转。

useNavigate 必须在 Route 的上下文中使用，即必须包裹在 Router 标签内。

?

import { useNavigate } from "react-router-dom";

<button onClick={() => navigate("/about")}>To About</button>