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
    评论
React Router 是一个为 React 应用程序提供路由功能的第三方包。它可以帮助我们在 React 应用程序中 URL,使得用户能够通过 URL 直接访问到特的页面。 使用 React Router,你需要首先安装它。可以通过以下命令来安装: ``` npm install react-router-dom ``` 然后在应用程序中引入路由相关的组件和方法: ```javascript import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; ``` 其中,`BrowserRouter` 是一个用于包裹整个应用程序的组件。`Switch` 组件用于包裹多个 `Route` 组件,用于匹配 URL 和组件。`Route` 组件用于定义每个 URL 对应的组件,`Link` 组件用于定义每个链接。 下面是一个简单的例子: ```javascript import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Users() { return <h2>Users</h2>; } function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users">Users</Link> </li> </ul> </nav> <Switch> <Route path="/about"> <About /> </Route> <Route path="/users"> <Users /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router> ); } ReactDOM.render(<App />, document.getElementById("root")); ``` 在这个例子中,我们定义了三个组件:`Home`、`About` 和 `Users`。在 `App` 组件中,我们使用 `Router` 包裹整个应用程序,并在组件中引入了三个链接,分别对应 `Home`、`About` 和 `Users` 组件。使用 `Switch` 和 `Route` 组件,我们将每个 URL 映射到相应的组件。 在这个例子中,如果用户访问 `/about`,则会显示 `About` 组件;如果用户访问 `/users`,则会显示 `Users` 组件;如果用户访问 `/`,则会显示 `Home` 组件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

派大星965

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

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

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

打赏作者

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

抵扣说明:

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

余额充值