react-router v6使用

快乐风男0-12

于 2024-07-18 09:33:34 发布

阅读量795

点赞数 34

分类专栏： react 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_56947432/article/details/140513492

版权

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

概述

Router

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

在 Web 浏览器中运行时应使用 <BrowserRouter> 或 <HashRouter>

Routing

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

<Routes> 和 <Route> 用于 JSX
useRoutes 用于 JavaScript 对象的配置

Navagation

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

Params

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

Component(API)

BrowserRouter

<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

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

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

<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 />,
        },
      ],
    },
 ])