2024年前端最新react-router-dom V6 中文文档教程总结_reactrouter6中文文档(2),2024前端大厂高频面试题

紧跟潮流

大前端和全栈是以后前端的一个趋势,懂后端的前端,懂各端的前端更加具有竞争力,以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线,由于图片太大仅展示一小部分

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

​编辑

2.8 useRoutes 钩子配置路由


一、对比 V5路由

<Route> 特性变更

path:与当前页面对应的URL匹配。

element:新增,用于决定路由匹配时,渲染哪个组件。代替v5的component和render。

代替了

让嵌套路由更简单

useNavigate代替useHistory

移除了的 activeClassName 和 activeStyle

钩子useRoutes代替react-router-config

移除了exact

路由官网:https://reactrouter.com/en/v6.3.0/api

二、路由使用步骤

2.1  引入库文件

引入最新的reac-router-dom

yarn

$ yarn add react-router-dom@6

npm

$ npm install react-router-dom@6

目前安装react项目 默认已经是v6版本了 不需要特殊加版本号

2.2 首页引入Router

我这里引入的是HashRouter,还有一种BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter,HashRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
    <App />
    </BrowserRouter>
    
);

2.3 路由用法

一级路由与多级路由
<Routes>
  {/*<Route path="/" element={<Film/>}/>*/}
  <Route index element={<Film/>}/> 
  <Route path="/film" element={<Film/>}/>
  <Route path="/cinema" element={<Cinema/>}/>
  <Route path="/center" element={<Center/>}/>
</Routes>

  • index用于嵌套路由,仅匹配父路径时,设置渲染的组件。
  • 解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候,可以增加index属性来指定默认路由。

2.4 重定向

使用 Navigate 组件替代
<Routes>
  <Route path="/film" element={<Film />} />
  <Route path="/cinema" element={<Cinema />} />
  <Route path="/center" element={<Center />} />
  <Route path="*" element={<Navigate to="/film" />} />
</Routes>

2.5 嵌套路由

<Route path="/film" element={<Film/>}>
  {/* <Route index  element={<Nowplaying/>}/> */}
  <Route path="" element={<Redirect to="/film/nowplaying"/>}/>
  <Route path="nowplaying" element={<Nowplaying/>}/>
  <Route path="comingsoon" element={<Comingsoon/>}/>
</Route>

// Film组件 <Outlet /> 相当于 <router-view />

2.6 声明式导航与编程式导航

2.6.1 声明式导航
<NavLink to='/'>首页</NavLink> |
<NavLink to='/news'>新闻</NavLink> | 
<NavLink to='/about'>我的</NavLink> | 
<NavLink to='/detail/123'>详情界面</NavLink>

2.6.2 编程式导航 (注意HOOK使用 类组件不可以直接使用)
// url传参
const navigate = useNavigate()
navigate(`/detail?id=${id}`)

// 获取url参数
import { useSearchParams } from 'react-router-dom'

const [searchParams, setSearchParams] = useSearchParams()
// 获取参数
searchParams.get('id')
// 判断参数是否存在
searchParams.has('id')
// 同时页面内也可以用set方法来改变路由
setSearchParams({"id":2})

2.7 动态路由

// 跳转页面,路由传参
navigate(`/detail/${id}`)

// 配置动态路由
<Route path="/detail/:id" element={<Detail />}/>
    
// 获取动态路由参数
import { useParams } from 'react-router-dom'  
const { id } = useParams()

发现props是一个空对象!!! 这样很多的功能根本通过路由参数实现不了了,比如:

编程式路由导航,在非受控组件中可以使用useNavigate这个钩子进行导航,而在类组件中无能为力,只能想办法使用这个标签,非常的麻烦,可以看看这篇文章:https://www.jianshu.com/p/5bdfd2fac2cd
获取路由参数 ,在以往的react-router-dom版本中,路由的三个参数location、history、match都是直接挂载到组件的props身上,即使组件不是路由组件,也可以使用withRouter高阶组件对普通组件进行增强,也可以将这三个参数带到props身上。

在v6版本中withRouter直接被移除。怎么办?
估计官方的目的是极力推荐我们使用React Hooks ,从而提高类组件的使用门槛(tm不能像vue那样做做兼容,平滑过度吗?)。只能自己编写高阶组件withRouter从而实现这一需求,可以看看这篇文章中的回答:https://cloud.tencent.com/developer/ask/sof/296970

// 获取动态路由参数
import { useNavigate,useLocation,useParams } from 'react-router-dom'  

export function withRouter( Child ) {
    return ( props ) => {
      const location = useLocation();
      const navigate = useNavigate();
      const params = useParams()
    //   const match= useMatch()
      return <Child params={params}  navigate={ navigate } location={ location } />;
    }
  }
  

组件使用的时候

import React, { Component } from 'react'
// 获取动态路由参数
import {withRouter} from './withRouter'
 class Detail extends Component {
   constructor(){
    super()
   }
  render() {
    console.log(this);
    return (
      <div>Detail
        <p>参数:{this.props.params.id}</p>
      </div>
    )
  }
}
export default withRouter(Detail)

App.js组件路由配置

import Home from './views/Home'
import News from './views/News'
import About from './views/About'
import One from './views/Today'
import Two from './views/Yestoday'
import Detail from './views/Detail'
import './app.css'
//配置路由
import { Route, Link, Routes, BrowserRouter,NavLink,Navigate ,Outlet} from 'react-router-dom'
function App() {
  return (
    <>
        <div>
          <NavLink to='/'>首页</NavLink> |
          <NavLink to='/news'>新闻</NavLink> | 
          <NavLink to='/about'>我的</NavLink> | 
          <NavLink to='/detail/123'>详情界面</NavLink>
          <Outlet/>
        </div>

        <Routes>
          {/* <Route path="/" element={<Home />}></Route> */}
          <Route index element={<Home />}></Route>
          <Route path="home" element={<Home />}></Route>
           {/* // 配置动态路由 */}
           <Route path="detail/:id" element={<Detail />}/>
           {/* 路由嵌套 */}
          <Route path="news" element={<News />}>
             {/* 二级路由 */}
             {/* 
             index用于嵌套路由,仅匹配父路径时,设置渲染的组件。
              解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候,可以增加index属性来指定默认路由。
              index路由和其他路由不同的地方是它没有path属性,他和父路由共享同一个路径。
              */}
            <Route index element={<One/>}></Route>
            <Route path='one' element={<One/>}></Route>
            <Route path='two' element={<Two />}></Route>
          </Route>
          <Route path="about" element={<About />}></Route>
          {/* //当输入  /* 任意信息,重定向到首页 */}
          <Route path='*' element={<Navigate replace to="/home" />} />
        </Routes>
    </>
  );
}

export default App;

样式

在V6 版本中activeClassName 和activeStyle 已经从NavLinkProps中移除,可以直接在<NavLink>的classNamestyle中使用一个函数来使用active

className的用法:

V5:

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

V6

let activeClassName = "underline"


### 最后

整理面试题,不是让大家去只刷面试题,而是熟悉目前实际面试中常见的考察方式和知识点,做到心中有数,也可以用来自查及完善知识体系。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**《前端基础面试题》,《前端校招面试题精编解析大全》,《前端面试题宝典》,《前端面试题:常用算法》**

![](https://img-blog.csdnimg.cn/img_convert/fd5f26fee6ad827f0c53acd1377fbac3.webp?x-oss-process=image/format,png)



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/4da1586778f4a8eca67eb1c8f13dd760.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/405b57bb46696ebea76eead124525457.webp?x-oss-process=image/format,png)



e"


### 最后

整理面试题,不是让大家去只刷面试题,而是熟悉目前实际面试中常见的考察方式和知识点,做到心中有数,也可以用来自查及完善知识体系。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**《前端基础面试题》,《前端校招面试题精编解析大全》,《前端面试题宝典》,《前端面试题:常用算法》**

[外链图片转存中...(img-RUwLlT56-1715585287537)]



[外链图片转存中...(img-jKlP7Ghc-1715585287538)]

[外链图片转存中...(img-nZ05Qyog-1715585287539)]



引用:react-router-dom是一个用于React应用程序的路由库。它提供了一种管理应用程序中不同页面之间导航的方式。react-router-dom有几个相关的模块,包括react-router-native、react-router-redux和react-router-config等。其中,react-router-native是用于React Native应用程序的绑定,react-router-redux是与Redux结合使用的模块,而react-router-config则是一个用于静态路由配置的助手。 引用:在使用react-router-dom的v6版本时,可以通过使用useRoutes函数来绑定路由配置。在一个App组件中,可以导入routes文件,并在App组件中使用useRoutes函数将路由配置渲染到页面上。 引用:在v6版本中,可以选择使用BrowserRouter或HashRouter来包裹整个应用程序的组件。BrowserRouter和HashRouter的作用都是为了管理地址栏的URL,但BrowserRouter使用的是正常的URL路径,而HashRouter修改的是地址栏的hash值。另外,在v6版本中,可以使用<Routes>和<Route>来进行路由配置,其中<Routes>用于包含多个<Route>组件,每个<Route>对应一个页面。 所以,如果你想了解react-router-dom v6的更多内容,可以参考官方文档或查看相关示例代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [react-router:react-router 中文文档](https://download.youkuaiyun.com/download/weixin_42166261/18230223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [react-router-dom V6 中文文档教程总结](https://blog.youkuaiyun.com/xm1037782843/article/details/127454966)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [React学习笔记_React Router 6](https://blog.youkuaiyun.com/qq_20470063/article/details/123361115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值