react路由6.0使用笔记

基本使用

1. 首先安装依赖

npm i react-router-dom

2. 引入实现路由所需的组件,以及页面组件

注意: BrowserRouter 组件最好放在最顶层所有组件之外,确保内部组件使用link做路由跳转时不出错

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./view/login";
import Layout from "./view/layout";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* path指定页面显示的路由路径 */}
        {/* element指定渲染的组件 */}
        <Route path="/login" element={<Login />}></Route>
        <Route path="/" element={<Layout />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

路由跳转

注意:路径以 / 开头的则是绝对路径,否则为相对路径,既相对于当前RUL的路径进行改变

link组件

import { Link } from "react-router-dom";
function Login() {
  return (
    <div>
      我的登录页面
      <button>
        {/* Link组件只能在Router内部使用,
        因此使用到Link组件的组件一定要放在顶层的Router之内 */}
        {/* to 指定要跳转的路由路径 */}
        <Link to="/home">立即登录</Link>
      </button>
    </div>
  );
}
export default Login;

NavLink组件

import { NavLink } from "react-router-dom";
function Login() {
  return (
    <div>
      我的登录页面
      <button>
        {/* NavLink组件和Link组件的功能是一致的,区别在于可以判断其to属性是否是当前匹配到的路由 */}
        {/* NavLink组件的style或className可以接收一个函数,函数接收一个isActive参数,可根据该参数调整样式 */}
        <NavLink
          style={(isActive) => ({ color: isActive ? "red" : "#fff" })}
          to="/home"
        >
          立即登录
        </NavLink>
      </button>
    </div>
  );
}
export default Login;

编程式跳转

import { useNavigate } from "react-router-dom";
function Login() {
  /* 使用useNavigate钩子函数生成navigate对象,可以通过JS代码完成路由跳转 */
  /* useNavigate取代了原先版本中的useHistory */
  const navigate = useNavigate();
  return (
    <div>
      我的登录页面
      <button onClick={() => navigate("/home")}>立即登录</button>
    </div>
  );
}
export default Login;

动态路由参数

路径参数

在Route组件中的path属性中定义路径参数

在组件内通过useParams hook访问路径参数

<BrowserRouter>
    <Routes>
        <Route path='/foo/:id' element={Foo} />
    </Routes>
</BrowserRouter>
​
import { useParams } from 'react-router-dom';
export default function Foo(){
    const params = useParams();
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )
}

search参数

  • 查询参数不需要在路由中定义
  • 使用useSearchParams hook来访问查询参数。其用法和useState类似,会返回当前对象和更改它的方法
  • 更改searchParams时,必须传入所有的查询参数,否则会覆盖已有参数
import { useSearchParams } from 'react-router-dom';
​
// 当前路径为 /foo?id=12
function Foo(){
    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 12
    setSearchParams({
        name: 'foo'
    }) // /foo?name=foo
    return (
        <div>foo</div>
    )
}

嵌套路由

通过嵌套的方式 书写Route组件 实现对嵌套路由的定义

<Routes>
  <Route path="/" element={<Home/>} ></Route>
  <Route path="/father" element={<Father/>} >
    <Route path='child' element={<Child/>}></Route>
  </Route>
</Routes>

在父组件中使用 Outlet 来显示匹配到的子组件

import {Outlet} from 'react-router-dom';
function Father(){
    return (
        <div>
            // ... 自己组件的内容
            // 留给子组件Child的出口
            <Outlet />
        </div>
    )
}

默认路由

定义:在嵌套路由中,如果URL仅匹配了父级URL,则 Outlet 中会显示带有 index 属性的路由

<Routes>
    <Route path='/foo' element={Foo}>
        <Route index element={Default}></Route>
        <Route path='bar' element={Bar}></Route>
    </Route>
</Routes>

全匹配路由

定义: path属性取值为 * 时,可以匹配任何(非空)路径,同时该匹配拥有最低的优先级。可以用于设置404页面

<Routes>
    <Route path='/foo' element={Foo}>
        <Route path='bar' element={Bar}></Route>
        <Route path='*' element={NotFound}></Route>
    </Route>
</Routes>

多组路由

通常,一个应用中只有一个Routes组件。

但根据实际需要也可以定义多个路由出口(如侧边栏和主页面都要随URL而变化)

<Router>
    <SideBar>
        <Routes>
            <Route></Route>
        </Routes>
    </SideBar>
    <Main>
        <Routes>
            <Route></Route>
        </Routes>
    </Main>
</Router>

重定向

当在某个路径/a下,要重定向到路径/b时,可以通过Navigate组件进行重定向到其他路径

import { Navigate } from 'react-router-dom';
function A(){
    return (
        <Navigate to="/b" />
    )
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

派大星965

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值