react-router v6使用 | 随想笔录

概述

Router

react-router 中提供了多种 Router,用来包裹整个应用。

在 Web 浏览器中运行时应使用或

Routing

路由是决定哪些 React 元素将被呈现. React Router 提供了两个接口来声明你的路由。

和用于 JSX
useRoutes 用于 JavaScript 对象的配置

Navagation

和在 React 应用上呈现可访问的元素或 TouchableHighlight。这让用户可以通过单击或点击页面上的元素来启动导航。
useNavigate 和用以编程方式导航，通常在事件处理程序中或响应某些状态变化

Params

useSearchParams 用于访问 url 中的查询字符串
useParams 用于获取路由参数
useLocation 用来获取组件跳转时传递的 state 数据

Component(API)

BrowserRouter

用于包裹整个应用。

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>{/* The rest of your app goes here */}</BrowserRouter>,
  root
);

HashRouter

作用与 BrowserRouter 一样,但是修改的是地址栏的 hash 值.官方不推荐使用

Routes 和 Route

和用于在 React Router 中渲染视图。你可以把想象成一个 if 语句；如果其路径与当前 URL 匹配，则呈现其视图。

每当位置发生变化时，都会查看其所有子元素以找到最佳匹配并呈现 UI 。元素可以嵌套以指示嵌套的 UI，这也对应于嵌套的 URL 路径。父路由通过渲染一个来渲染它们的子路由

<Routes>
  // path属性用于定义路径 // element属性用于定义当前路径所对应的组件
  <Route path="/login" element={<Login />}></Route>
  // 用于定义嵌套路由 // home就是一级路由 对应的路径/home
  <Route path="home" element={<Home />}>
    // test 和 test2 就是二级路由 对应的路径是/home/test 或 /home/test2
    <Route path="test" element={<Test />}></Route>
    <Route path="test2" element={<Test2 />}></Route>
  </Route>
  // Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
  <Route path="users">
    <Route path="xxx" element={<Demo />} />
  </Route>
</Routes>

Link

作用: 修改浏览器的地址栏地址,并且不发送请求(最终渲染的是 a 标签)

注意: 需要被 Router 包裹

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

function Test() {
  return (
    <div>
      <Link to="/路径">点击</Link>
    </div>
  );
}

NavLink

作用: 与 Link 组件类似,可以快速实现导航 Highlight

// 注意: 默认类名是active, 下面是自定义的style和类名
<NavLink
    to="login"
    style={({ isActive }) => {
        console.log('login', isActive)
        return isActive ? activeStyle : undefined
    }}>
        login
</NavLink>

<NavLink
    to="home"
    className={({ isActive }) => {
        console.log('home', isActive)
        return isActive ? 'base one' : 'base'
    }}>
        home
</NavLink>

// 注意:  默认,当Home的子组件匹配成功,Home的导航也会高亮.当NavLink上添加了end属性,则Home的子组件匹配成功的时候,Home的导航没有高亮效果
<NavLink
    to="home"
    end
	>
        home
</NavLink>

Navigate

只要 Navigate 组件被解析,就会修改路径,切换视图
相当于 useNavigate

import * as React from "react";
import { Navigate } from "react-router-dom";

export default class Test extends React.Component {
  state = { isNav: false };
  render() {
    let { isNav } = this.state;
    return (
      <div>
        <h1>test组件</h1>
        {isNav && <Navigate to="/login" replace={true} />}
        <button
          onClick={() => {
            this.setState({ isNav: true });
          }}
        >
          按钮
        </button>
      </div>
    );
  }
}

Outlet

用于处理嵌套路由

// - App.js
<Routes>
  <Route path="/home" element={<Home />}>
    <Route path="/home/test" element={<Test />}></Route>
    <Route path="/home/test2" element={<Test2 />}></Route>
  </Route>
  <Route path="/login" element={<Login />}></Route>
</Routes>;

// - Home.js
export default function Home(props) {
  return (
    <div>
      <h1>首页</h1>
      <NavLink to="/home/test">test</NavLink>
      <NavLink to="/home/test2">test2</NavLink>
      <hr />
      // test和test2组件会渲染在Outlet的位置上
      <Outlet></Outlet>
    </div>
  );
}

Hooks(API)

useNavigate

返回一个函数用来编程式导航

export default function Test2() {
  const navigate = useNavigate();
  const handle = () => {
    navigate("/login/9/99?name=zs&age=18", {
      replace: false,
      state: { a: 1, b: 2 },
    });

    或;

    navigate(-1); //类似于history.go()方法
  };
  return (
    <div>
      <h1>test2</h1>
      <button onClick={handle}>按钮</button>
    </div>
  );
}

useParams

useParams 钩子返回当前匹配路由的路由参数
子路由继承父路由的所有参数

import * as React from "react";
import { Routes, Route, useParams } from "react-router-dom";

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId, id } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      // 注意:
      v6版本中,只要配置了路由参数就必须传递,否则无法匹配.而且?也是无效的
      <Route path="users/:id">
        <Route path=":userId" element={<ProfilePage />} />
      </Route>
    </Routes>
  );
}

useLocation

获取 location 信息

export default function Login() {
  const location = useLocation()
  console.log(location)
  return <div>login</div>
}
// location对象:
{
  hash: "",
  key: "ah9nv6sz",
  pathname: "/login",
  search: "?name=zs&age=18",
  state: {a: 1, b: 2}
}

useSearchParams

useSearchParams 钩子用于读取和修改当前位置的 URL 中的查询字符串。与 React 自己的 useState 钩子一样，useSearchParams 返回一个包含两个值的数组：当前位置的搜索参数和一个可用于更新它们的函数

export default function Login() {
  const [query, setQuery] = useSearchParams();
  // 注意: query是一个formdata对象
  console.log("login", query.get("name"));

  function handle() {
    // 可以修改当前路径的查询字符串
    setQuery("x=12&y=34");
  }
  return (
    <div>
      <h1>login</h1>
      <button onClick={handle}>按钮</button>
    </div>
  );
}

useRoutes

用于根据路由表,动态创建 Routes 和 Route

//element就是写好的Routes和Route

const element = useRoutes([
  {
    path: "/",
    element: <Home />,
    children: [
      { path: "test", element: <Test /> },
      { path: "test2", element: <Test2 /> },
    ],
  },
  {
    path: "/login/:page/:pageSize",
    element: <Login />,
  },
  {
    path: "users/:id",
    children: [
      {
        path: ":xxx",
        element: <Demo />,
      },
    ],
  },
]);

概述 ​

Router ​

Routing ​

Navagation ​

Params ​

Component(API) ​

BrowserRouter ​

HashRouter ​

Routes 和 Route ​

Link ​

NavLink ​

Navigate ​

Outlet ​

Hooks(API) ​

useNavigate ​

useParams ​

useLocation ​

useSearchParams ​

useRoutes ​

概述