首页 > 资讯 > 前端开发 > JavaScript >React 路由使用示例详解

366

分享到

React 路由使用示例详解

2024-04-02 19:04:59 366人浏览泡泡鱼

摘要

目录Router简单路由嵌套路由未匹配路由路由传参数索引路由活动链接搜索参数自定义行为useNavigate参考资料Router React-router-dom是一个处理页面跳转的

Router

React-router-dom是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：

# npm
npm install react-router-dom@6
#yarn
yarn add react-router-dom@6

简单路由

使用路由时需要为组件指定一个路由的path，最终会以path为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较简单就是两个Tab页面的来回切换。

///导入路由
import {Link} from 'react-router-dom'
function App() {
  return (
    <div>
      <h1>路由练习</h1>
      <nav>
        {}
        <Link className ='link' to='/Tab1'> Tab1</Link> ///覆盖：渲染tab1组件
        <Link className = 'link' to='/Tab2'> Tab2 </Link> ///覆盖：渲染tab2组件
      </nav>
    </div>
    );
}
///路由页面1
export default function Tab1(params) {
    return (
        // 文档中，<main> 元素是唯一的，所以不能出现一个以上的 <main> 元素
        <main style={{ padding: "1rem 0" }}>
          <h2>我是Tab1</h2>
        </main>
      );
}
///路由页面2
export default function Tab2(params) {
    return (
        <main style={{ padding: "1rem 0" }}>
          <h2>我是Tab2</h2>
        </main>
      );
}
///在index.js中配置路由
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import Tab1 from './pages/Tab1.jsx'
import Tab2 from './pages/Tab2.jsx'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
     <Routes>
       <Route path = '/' element = {<App/>} /> ///兄弟路由
       <Route path = '/Tab1' element = {<Tab1/>} />///兄弟路由
       <Route path = '/Tab2' element = {<Tab2/>} />///兄弟路由
     </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

最终交互时，上述路由配置会出现彼此覆盖的情况，如下图：

为了保证App组件，不会在Tab1和Tab2切换时被覆盖需要使用嵌套路由。

嵌套路由

嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此React提供了Outlet组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。

Outlet渲染一个子路由的元素

import {Link,Outlet} from 'react-router-dom'
function App() {
  return (
    <div>
      <h1>路由练习</h1>
      <nav>
        {}
        <Link className ='link' to='/Tab1'> Tab1</Link> 
        <Link className ='link' to='/Tab2'> Tab2 </Link>
      </nav>
      {}
      <Outlet/>
    </div>
    );
}

///index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
       <Route path='/' element={<App />} >
          {}
          <Route path='Tab1' element={<Tab1 />} /> 
          <Route path='Tab2' element={<Tab2 />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

最终效果如下图：

未匹配路由

通过path='*',实现没有其他路由匹配时，对其进行匹配。

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
      <Route path='/' element={<App />} >
          {}
          <Route path='Tab1' element={<Tab1 />} /> 
          <Route path='Tab2' element={<Tab2 />} />
          <Route path = '*' element={<p>
            未匹配到路由时，会跳转此处。
          </p>} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

效果如图：

路由传参数

通过路由传递参数到组件中

///模拟数据
const dataList = [
    {
        id:20220101,
        content:'笔记1'
    },
    {
        id:20220102,
        content:'笔记2'
    },
    {
        id:20220103,
        content:'笔记3'
    },
]
export default function getTodoList(params) {
    return dataList
}

export function findTodoItem(params) {
    return dataList.find((value)=>value.id === params)
}
///组件Tab2中定义列表
export default function Tab2(params) {
    let list = getTodoList()
    return (
        <div>
            <ul>
                {
                    list.map((item) => (
                        <li key={item.id}>
                           {}
                            <Link to={`/Tab2/${item.id}`}>{item.content}</Link>
                        </li>
                    ))
                }
            </ul>
           {}
            <Outlet />
        </div>
    );
}

///注册列表项的子路由
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
      <Route path='/' element={<App />} >
          {}
          <Route path='Tab1' element={<Tab1 />} /> 
          <Route path='Tab2' element={<Tab2 />} >
            <Route path=':itemId' element={<ItemDetail/>}/>
          </Route>
          <Route path = '*' element={<p>未匹配到该路由请先设置路由页面 </p>} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

///定义Tab2子组件 ItemDetail
import { useParams } from 'react-router-dom'
export function ItemDetail() {
    //点击每一项的链接，注意：URL 发生了变化，但新的组件尚未显示
    ///需要父组件中添加<Outlet>
    ///HOOK 获取路由中的参数，形如{itemId:'20220102'}
    let params = useParams()
    let content = findTodoItem(parseInt(params.itemId)).content
    return (
        <div>
            <h2>笔记详情</h2>
            <p>这是我于{params.itemId},记录的笔记他的内容为{content}</p>
        </div>
    )
}

最终效果：

索引路由

当我们切换至Tab1再切回Tab2后，笔记详情页面将空白，效果如下：

可以通过索引路由填补空白，具体只需：

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
      <Route path='/' element={<App />} >
          {}
          <Route path='Tab1' element={<Tab1 />} /> 

          <Route path='Tab2' element={<Tab2 />} >
            {}
            <Route index element={<p>请选择一个笔记查看它的详情 </p>}/>
            <Route path=':itemId' element={<ItemDetail/>}/>
          </Route>
          
          <Route path = '*' element={<p>未匹配到该路由请先设置路由页面 </p>} />

        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

如此当我们重复上述操作时便会呈现如下效果：

当父路由匹配，但其他子路由都不匹配时，由索引路由匹配。索引路由是父路由的默认子路由。当用户尚未单击导航列表中的一项时，会呈现索引路由。

活动链接

与Link功能一致，差异是可以设置点击后的颜色

export default function Tab2(params) {
    let list = getTodoList()
    return (
        <div>
            <ul>
                {
                    list.map((item) => (
                        <li key={item.id}>
                            {}
                            <NavLink style = { ({isActive})=> ({ color : isActive ? "red" : "" }) } to={`/Tab2/${item.id}`}> {item.content} </NavLink>
                        </li>
                    ))
                }
            </ul>
            <Outlet />
        </div>
    );
}

搜索参数

搜索参数类似于 URL 参数，形如/login?success=1

export default function Tab2(params) {
    let list = getTodoList()
    ///和React.useState很像
    let [searchParams, setSearchParams] = useSearchParams();
    return (
        <div>
            {}
            <input type="text" onChange = { (event)=>{
                let text = event.target.value
                if (text) {
                    setSearchParams({text})
                } else {
                    setSearchParams({})
                }
            } } />

            <ul>
                { list.filter((item)=>{
                    let txt = searchParams.get('text')
                    if (!txt) return true
                    return item.content.startsWith(txt)
                })
                    .map((item) => (
                        <li key={item.id}>
                            {}
                            <NavLink style = { ({isActive})=> ({ color : isActive ? "red" : "" }) } to={`/Tab2/${item.id}`}> {item.content} </NavLink>
                        </li>
                    ))
                }
            </ul>

            <Outlet />
        </div>
    );
}

随着我们输入apple, 路由的地址将变为/Tab2?text=apple触发路由重新呈现。

当我们在输入框输入字符时，便会触发列表的过滤显示：

自定义行为

上述UI在交互过程中，当我们点击Tab1和Tab2进行切换时，或者点击apple或appet时，会出现输入框被清空，且列表不再被过滤的问题。

react-router提供了useLocation方法，它返回浏览器显示的url信息。通过它可以获取浏览器url中的搜索参数，从而进行暂存，在具体组件内，可以通过useSearchParams获取到暂存的值。具体方式，通过自定义组件包装NavLink或Link来实现。

///1.自定义`QueryLink`组件
import React, { Component } from 'react';
import { useLocation,NavLink } from "react-router-dom";
export default function QueryLink({to,...props}) {
  ///代表当前浏览器显示的url
  // location内容：{pathname: '/Tab2', search: '?text=ad', hash: '', state: null, key: 'dhvg8xme'}
  let location = useLocation()
  // to = '/Tab2?text=ad'
  return <NavLink to={to+location.search} {...props} />
}
//2. 替换 `tab1`、`tab2`的link or Navlink
<QueryLink className ='link' to='/Tab1'> Tab1</QueryLink> 
<QueryLink className ='link' to='/Tab2'> Tab2 </QueryLink>
//3. 替换列表项的link or Navlink
 <li key={item.id}>
   <QueryLink style = { ({isActive})=> ({ color : isActive ? "red" : "" }) } to={`/Tab2/${item.id}`}> {item.content} </QueryLink>
 </li>

useNavigate

上述示例中，路由的切换采用Link或者NavLink，但当我们的页面元素不使用Link时，比如使用Button，此时便需要使用采用useNavigate。同上可以配合useLocation保存搜索字段。

export function ItemDetail() {
    //点击每一项的链接，注意：URL 发生了变化，但新的组件尚未显示
    ///需要父组件中添加<Outlet>
    let params = useParams()
    let content = findTodoItem(parseInt(params.itemId)).content
    ///返回函数
    let navigate = useNavigate()
    ///获取搜索字段
    let location = useLocation()
    return (
        <div>
            <h2>笔记详情</h2>
            <p>这是我于{params.itemId}记录的笔记，内容为{content}</p>
            <button onClick = {
                (e)=>{
                    deleteTodoItem(params.itemId)
                    navigate('/Tab2/'+location.search)
                }
            }>
                删除笔记
            </button>
        </div>
    )
}
// src/data.jsx
export function deleteTodoItem(params) {
    dataList = dataList.filter((value)=>value.id !== parseInt(params)) 
}

参考资料

reactrouter.com/docs/en/v6/…

到此这篇关于React 路由使用的文章就介绍到这了,更多相关React 路由使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

到此这篇关于React 路由使用示例详解的文章就介绍到这了,更多相关React 路由使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React 路由使用示例详解

本文链接: https://www.lsjlt.com/news/149917.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React 路由使用示例详解

目录Router简单路由嵌套路由未匹配路由路由传参数索引路由活动链接搜索参数自定义行为useNavigate参考资料Router react-router-dom是一个处理页面跳转的...

99+

2022-11-13
React路由拦截模式及withRouter示例详解

目录一、路由拦截二、路由模式三、withRouter一、路由拦截在前面两篇路由博客基础上，我们将ReactRouter.js的我的profile路由设置成路由拦截的： <R...

99+

2022-11-13

React路由拦截模式withRouter React路由
React中react-redux和路由详解

目录观察者模式解决组件间通信问题react-reduxconnect方法Provider组件路由使用路由默认路由路由重定向获取路由参数路由导航观察者模式解决组件间通信问题使用观察者...

99+

2022-11-13
flutter的导航和路由使用示例详解

目录导航和路由使用Navigator导航命名路由命名路由的局限使用路由Router同时使用Router和Navigator深度链接 Deep linking在 Android 上启用...

99+

2022-12-29

flutter 导航路由 flutter 路由
react使用useImperativeHandle示例详解

目录1.前言2.useImperativeHandle初探3.获取元素的几种方式3.1 useRef：获取组件内部元素3.2 forwardRef：父组件获取子组件内部的一个元素3....

99+

2022-11-13
react 路由Link配置详解

1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{...

99+

2022-11-12
React中前端路由的示例代码

目录一. url是什么二. 使用步骤一. url是什么访问不同url, 展示不同的组件二. 使用步骤安装React路由：命令行中执行npm install react-rout...

99+

2022-11-13
详解react-navigation6.x路由库的基本使用

目录react-native项目初始化安装react-native项目react-navigation路由库安装使用路由库路由跳转与路由传参设置路由标题自定义标题组件标题按钮reac...

99+

2022-11-12
Vue--Router动态路由的用法示例详解

目录官网网址动态路由概述同一路由多个参数path-to-regexpApi用法1. pathToRegexp()2、exec()3. parse()4. compile()本文介绍V...

99+

2022-11-13

Vue Router动态路由 Vue Router路由 Vue Router动态路由用法
React-router v4路由配置的示例分析

这篇文章主要介绍了React-router v4路由配置的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一. Switch 、Rou...

99+

2022-10-19
react router 4.0以上路由应用的示例分析

小编给大家分享一下react router 4.0以上路由应用的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！在4.0以下的react router中，嵌套的路由可以放在一个rou...

99+

2022-10-19
react中使用antd及immutable示例详解

目录一、react中使用antd组件库二、Immutable2.1 深拷贝和浅拷贝的关系2.2 immutable优化性能方式2.3 immutable的Map使用2.4 immut...

99+

2022-11-13

react使用antd immutable react antd react immutable
react-router-domV6嵌套路由实现详解

目录V6新特性<Route>的属性变更component/render->element<Link/>使用变动<Redirect/> 替换为...

99+

2023-01-04

react-router-domV6嵌套路由 react router domV6
react-router-domV6版本的路由和嵌套路由写法详解

目录1 - 单级路由2 - 嵌套路由（about路径进行嵌套）React Router v6使用路由嵌套和重定向1 - 单级路由 <NavLink to="/home">...

99+

2022-11-13
React中路由的参数传递路由的配置文件详解

目录路由的参数传递配置动态路由路由的配置文件路由的参数传递传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组...

99+

2022-11-13

React路由参数传递 React路由配置文件 React路由 React路由参数
Vue3.0路由跳转携带参数的示例详解

目录一、路由跳转1、在需要跳转的页面2、如果有参数的话，在接收页面引入API–useRoute二、页面传参需要注意的问题一、路由跳转 1、在需要跳转的页面 //引入API...

99+

2023-05-15

Vue3.0路由跳转 Vue路由跳转 Vue3.0路由跳转携带参数
Vue3 中路由Vue Router 的使用实例详解

目录前言：一、什么是 Vue Router ？二、路由的使用1、路由的安装2、路由的模式3、创建路由模块4、声明路由链接和占位符三、路由的重定向和别名四、嵌套路由五、声明式和编程式导...

99+

2023-02-18

Vue3 路由Vue Router使用 Vue Router使用
react-redux的connect示例详解

connect简介：connect是react-redux两个api中其中之一，在使用react-redux时起到了为redux中常用的功能实现了和react连接的建立函数入口，以及...

99+

2023-01-31

react-redux的connect react-redux
React路由参数传递与嵌套路由的实现详细讲解

目录1. 页面路由参数传递1.1 动态路由参数1.2 search字符串1.3 页面参数隐式传递2. 嵌套路由1. 页面路由参数传递 1.1 动态路由参数描述：以“/...

99+

2022-11-13
示例详解react中useState的用法

useState useState 通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state。useState 会返回一对值：当前状态...

99+

2022-11-12